Html 盒子大小调整不正常
我试图创建自己的自定义Html 盒子大小调整不正常,html,css,Html,Css,我试图创建自己的自定义选择标记,但遇到了一个奇怪的问题 下面是我的代码: HTML: <div class="drop_select"> <select> <option>1</option> <option>2</option> <option>3</option> </select> </div&
选择标记,但遇到了一个奇怪的问题
下面是我的代码:
HTML:
<div class="drop_select">
<select>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
.drop_select {
width:180px;
height: 34px;
overflow: hidden;
background: url(http://s22.postimg.org/liq7aghz5/select_icons.png) no-repeat 148px -165px #000000;
border-radius: 10px;
margin-bottom: 5px;
transition: background 0.3s ease-in-out;
-moz-transition: background 0.3s ease-in-out;
-webkit-transition: background 0.3s ease-in-out;
-ms-transition: background 0.3s ease-in-out;
}
.drop_select:hover {
background-position: 148px -115px;
}
.drop_select select {
background: rgba(0, 0, 0, 0);
-moz-background: transparent;
-webkit-background: transparent;
width: 202px;
padding: 8px 5px 8px 8px;
font: 12px arial;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
-o-appearance: none;
color: #ffffff;
-o-background: #000000;
}
.drop_select:hover select {
color: #ebb52d;
}
.drop_select select option {
color: #fff;
text-indent: 5px;
padding: 7px 0px 7px 3px;
width: 182px !important;
background: #000;
border-bottom: dotted 1px #515151;
transition: background 0.5s ease-in-out;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
}
.drop_select select option:hover, .drop_select select option:focus, .drop_select select option:active {
background: #515151 !important;
color: #dfb52d;
}
我在Firefox中使用了框大小和边框底部,但在chrome和IE中没有使用
截图
希望你能在上面的图片中找到不同之处。此外,我还修改了我的代码,请提供建议
提前感谢。简短的回答是,您目前无法在Webkit浏览器中设置这样的下拉选项。您可以使用样式正确的UL来实现相同的结果。@SebastianG No.填充不是我的问题,而是盒子大小和边框线的问题。你可以在图片中找到行为上的差异。但是,你应该描述你所说的“良好工作”是什么意思。firefox的屏幕截图对我来说也不正确。@SebastianG在firefox中,我可以有一个带点边框的框大小的空间。然而这在chrome和IE10中缺失。border-radius在中不起作用ie@ankurIE9和IE10将支持边界半径。