Question

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

选择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

remove style =＆＃34; width：150px＆＃34;从select标签开始，内联样式始终会覆盖通过css应用的样式。

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

Answer 2

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

以下选择器列表是通过提高特异性来实现的：

通用选择器
类型选择器
班级选择器
属性选择器
伪类ID选择器
内联样式

Answer 3

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>

简单的html表单的“选择”下拉部分抵制css样式

3 个答案: