select box css properties not inherited from its parent._问答_开发者

select box css properties not inherited from its parent.

开发者 https://www.devze.com 2023-03-23 19:46 出处：网络

select tag seems to not inherit from it\'s parent, is that expected? What I am doing wrong in this simple piece of code?

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).