如何使用CSS将选择下拉列表中的文本对齐方向移向顶部和左侧?

时间:2013-04-04 21:59:31

标签: html css select html-select

我正在尝试使用JavaScript和CSS在类似电子表格的表格上方显示下拉列表但是我遇到了对齐问题。我已将所有边框,边距和填充设置为零,但是我无法确定如何将文本(显示下拉列表之前的默认文本)移动到左上角。我已经使用text-indent: -3px;让它向左移动,但是3px-5px间隙(用background-color: #888888;清晰可见而不仅仅是选择边界的边缘)会剪切文本左

有谁知道如何将基于选择的HTML下拉列表的文本位置转移到左上角?

编辑:

从Chrome添加计算样式,以显示文本框与带有屏幕截图的下拉列表之间的区别。

Textbox CSS:

-webkit-border-image: none;
-webkit-line-break: after-white-space;
-webkit-nbsp-mode: space;
-webkit-user-modify: read-write;
border-bottom-color: rgb(37, 66, 100);
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: rgb(37, 66, 100);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(37, 66, 100);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(37, 66, 100);
border-top-style: none;
border-top-width: 0px;
color: rgb(37, 66, 100);
cursor: auto;
display: block;
font-family: Calibri, sans-serif;
font-size: 15px;
height: 18px;
left: 204px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(37, 66, 100);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
top: 21px;
white-space: pre;
width: 73px;
word-wrap: break-word;
z-index: 99;

选择CSS:

-webkit-appearance: menulist-button;
-webkit-border-image: none;
-webkit-box-align: center;
-webkit-rtl-ordering: logical;
-webkit-user-select: none;
-webkit-writing-mode: horizontal-tb;
background-color: rgb(255, 255, 255);
border-bottom-color: rgb(37, 66, 100);
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
border-bottom-style: none;
border-bottom-width: 0px;
border-left-color: rgb(37, 66, 100);
border-left-style: none;
border-left-width: 0px;
border-right-color: rgb(37, 66, 100);
border-right-style: none;
border-right-width: 0px;
border-top-color: rgb(37, 66, 100);
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-top-style: none;
border-top-width: 0px;
box-sizing: border-box;
color: rgb(37, 66, 100);
cursor: default;
display: block;
font-family: Calibri, sans-serif;
font-size: 15px;
height: 16px;
left: 281px;
letter-spacing: normal;
line-height: normal;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
outline-color: rgb(37, 66, 100);
outline-style: none;
outline-width: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
position: absolute;
text-align: start;
text-indent: -3px;
text-shadow: none;
text-transform: none;
top: 22px;
white-space: pre;
width: 135px;
word-spacing: 0px;
writing-mode: lr-tb;
z-index: 99;

文本框的屏幕截图: enter image description here 选择的屏幕截图: enter image description here

2 个答案:

答案 0 :(得分:2)

我和你的情况完全相同......可悲的是,我能想出的唯一一件事就是让文本更加正确地添加: 

<select name='something'>
<option value='nan'>&nbsp;&nbsp; Some Text Here</option>
<option value='nan'>&nbsp;&nbsp; Some Text Here</option>
</select>

答案 1 :(得分:1)

只是为了排除基础知识,你试过了吗?

   option, select {
      text-align: left;
      vertical-align: top;
   }