Question

select tag似乎不是从它的父级继承的，是预期的吗？我在这段简单的代码中做错了什么？

<!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="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>

Answer 1

表单控件通常不会从其父元素继承CSS属性，因为Web浏览器倾向于以默认方式显示表单字段。

这样想。如果我创建了一个黄色背景和48px正文的网站，你会期望表单字段是48px和黄色吗？在您的具体情况下是的，这样的表单字段继承将是一件好事;但是对于浏览器来实现它，对于网页设计和用户体验角度来说这不是一件好事。

您应该做的是将form{更改为form, input, select, button{，以便接收您想要的样式。

Answer 2

您使用的是重置样式表吗？（http://meyerweb.com/eric/tools/css/reset/）

浏览器为表单元素添加了许多默认样式，因此使用重置样式表可能有所帮助。

也就是说，你可以添加到某些表单元素的样式量也有限制（没有得到相当的hacky）。

选择不从其父级继承的box css属性。

2 个答案: