自定义选择框在文本前面有空格

时间:2014-09-22 11:50:19

标签: css html5 frontend

我创建自定义下拉框。它在文本前面有额外的3px空间(见下图)。问题只发生在Windows(chrome 37.0.2062.120)中,但OS X中的问题还可以。

以下是适用于选择标记的样式列表

-webkit-appearance: none;
-webkit-background-clip: border-box;
-webkit-background-origin: padding-box;
-webkit-background-size: auto;
-webkit-box-shadow: none;
-webkit-rtl-ordering: logical;
-webkit-transition-delay: 0s, 0s;
-webkit-transition-duration: 0.15s, 0.15s;
-webkit-transition-property: border-color, box-shadow;
-webkit-transition-timing-function: ease-in-out, ease-in-out;
-webkit-writing-mode: horizontal-tb;
align-items: center;
background-attachment: scroll;
background-clip: border-box;
background-color: rgb(255, 255, 255);
background-image: none;
background-origin: padding-box;
background-size: auto;
border-bottom-color: rgb(208, 215, 219);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
border-collapse: separate;
border-image-outset: 0px;
border-image-repeat: stretch;
border-image-slice: 100%;
border-image-source: none;
border-image-width: 1;
border-left-color: rgb(208, 215, 219);
border-left-style: solid;
border-left-width: 1px;
border-right-color: rgb(208, 215, 219);
border-right-style: solid;
border-right-width: 1px;
border-top-color: rgb(208, 215, 219);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: solid;
border-top-width: 1px;
box-shadow: none;
box-sizing: border-box;
color: rgb(73, 73, 73);
cursor: default;
display: block;
float: left;
font-family: xxxxx;
font-size: 16px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 50px;
letter-spacing: normal;
line-height: 30px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 6px;
padding-left: 19px;
padding-right: 5px;
padding-top: 6px;
position: relative;
text-align: start;
text-indent: 0px;
text-shadow: none;
text-transform: none;
transition-delay: 0s, 0s;
transition-duration: 0.15s, 0.15s;
transition-property: border-color, box-shadow;
transition-timing-function: ease-in-out, ease-in-out;
white-space: pre;
width: 210px;
word-spacing: 0px;
writing-mode: lr-tb;
z-index: 2;

Screen capture

-----更新------

我捕获新的屏幕截图以指示Windows和OS X上的盒子模型,见下文。

第一个是在Windows上。 Windows

第二个是OS X. OSX

这两张图片适用相同的CSS。

1 个答案:

答案 0 :(得分:1)

减少填充左:19px;为了更小的东西,尝试,必须工作。