select box css properties not inherited from its parent.
select tag seems to not inherit from it's parent, is that expected? What I am doing wrong in this simple piece of code?
<!DOCTYPE html>
<html lang="en">
<head>
<style>
form
{
color:#0000cc;
font-size: 10px;
}
</style>
<title>Select boxes not affected by its css parent propertieses</title>
</head>
<body>
<form action="#" method="POST">
<div id="refine_race_search">
<div><label for="test">my_label</label>
<select>
<option value="1">value 1</option>
<option value="开发者_StackOverflow中文版1">value 2</option>
<option value="1">value 3</option>
<option value="1">value 4</option>
</select>
</div>
<input type="submit" value="Send"/>
</div>
</form>
</body>
</html>
Form controls do not generally inherit CSS attributes from their parent elements, as web browsers tend to display the form fields in a default way.
Think of it this way. If I made a website with a yellow background and 48px body text, would you expect the form fields to be 48px and yellow too? Yes in your specific case, such form field inheriting would be a good thing; but for browsers to implement it, it wouldn't be a good thing for web design and from a user experience angle.
What you should do instead is change form{ to form, input, select, button{, in order to receive the styling you want.
Are you using a reset stylesheet? (http://meyerweb.com/eric/tools/css/reset/)
Browsers add a lot of default styling to form elements, so utilizing a reset stylesheet may help.
That said, there are also limits to the amount of styling you can add to some form elements (without getting fairly hacky).
加载中,请稍侯......
精彩评论