"select" 简单 html 表单的下拉部分抵制 css 样式

Question

我有一个相当简单的网络表单来输入姓名、电子邮件，并提供了一个下拉框 select 人们正在使用哪种设备。除了 select（下拉列表）之外的每个部分都符合 css 样式。 select 也会忽略下面列出的宽度表达式。我在网上找到的解决方案都没有扩展它以满足 190px 的长度。（它的高度也阻止了任何改变它的尝试。）谁能指出我正确的方向？

Select html 代码部分：

Device Type:<br />
<select name="Dtype" style="width: 150px">
<option value="iPad">iPad</option>
<option value="iPhone">iPhone</option>
<option value="AndroidTablet">Android Tablet</option>
<option value="AndroidPhone">Android Phone</option></select>

CSS:

label {
    display: inline-block;
    position: relative;
    float: left;
    text-align: left;
    margin-right: 20px;
    width: 190px;
    padding: 5px;
}

input, textarea { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    font: normal 13px/100% Verdana, Tahoma, sans-serif; 
    width: 190px; 
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    } 

input:hover, textarea:hover, 
input:focus, textarea:focus { 
    border-color: #C9C9C9; 
    -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px; 
    } 

select { 
    padding: 9px; 
    border: solid 1px #E5E5E5; 
    outline: 0; 
    width: 190px;
    font: normal 13px/100% Verdana, Tahoma, sans-serif;
    background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF)); 
    background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px); 
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
    }    



.form label { 
    margin-left: 10px; 
    color: #999999; 
    } 

.submit input { 
    width: auto; 
    padding: 9px 15px; 
    background: #617798; 
    border: 0; 
    font-size: 14px; 
    color: #FFFFFF; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    }

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] {
-moz-appearance: textfield;
}

Answer 1

您必须从 html 中删除 style="width: 150px"，或在 css 中使用 !important：width: 190px !important;

以下选择器列表是递增特异性的：

通用选择器
类型选择器
Class 个选择器
属性选择器
伪类 ID选择器
内联样式

Answer 2

css 正在按预期工作。就宽度而言，那是因为你有内联样式，它覆盖了 css 规则。

演示：http://jsfiddle.net/lotusgodkk/GCu2D/558/

HTML:

Device Type:
<br />
<select name="Dtype">
    <option value="iPad">iPad</option>
    <option value="iPhone">iPhone</option>
    <option value="AndroidTablet">Android Tablet</option>
    <option value="AndroidPhone">Android Phone</option>
</select>

Answer 3

从 select 标签中删除 style="width: 150px"，内联样式始终覆盖通过 css.

应用的样式

如果删除内联样式，它将选择 css 中应用的样式。

"select" 简单 html 表单的下拉部分抵制 css 样式

"select" dropdown section of simple html form resists css styling

html

css

forms

select

width