Question

HTML code：

   <div class="col-lg-7 col-md-7 col-sm-7"> 
   <select class="tblselect2 ">
   <option value="">Item 1</option>
   <option value="">Item 1</option>
    </select>
   </div>

我正在使用此CSS格式化select option。

.tblselect2 {

    background: url("../images/arrow1.png") no-repeat scroll right center white;
    font-size: 12px;
    height: 18px;
    line-height: 1.5;
    margin-bottom: 0px;
    padding: 2px 0 17px 0;
line-height: 1.5;
border: 1px solid #d9d9d9;
    border-radius: 4px;
    color: #555555;
    width: 64%;
}

当我使用此css时，所选值不会进入选择框。我需要添加此css，以格式化选择按钮。我需要为右下拉添加图像。

Answer 1

由于您在CSS中使用的高度和填充，它正在隐藏。像下面一样更新你的CSS。

.tblselect2 {
background: url("../images/arrow1.png") no-repeat scroll right center white;
font-size: 12px;
height: 24px;
line-height: 1.5;
margin-bottom: 0px;
padding: 2px 0 4px 0;
line-height: 1.5;
border: 1px solid #d9d9d9;
border-radius: 4px;
color: #555555;
width: 64%;
}

修改

如果要隐藏选择框的原始箭头，请使用以下CSS。但是这个解决方案将适用于IE10 +浏览器Chrome。 IE旧浏览器它不会工作。

.tblselect2 { background: url("http://www.fifa.com/imgml/icons/events/arrow_Down_Red.gif") no-repeat 99% 5px white; font-size: 12px; height: 24px; line-height: 1.5; margin-bottom: 0px; padding: 2px 0px 4px 0; line-height: 1.5; border: 1px solid #d9d9d9; border-radius: 4px; color: #555555; width: 64%; appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; } .col-lg-7 select::-ms-expand{ display: none; }

FIDDLE DEMO

Answer 2

调整css代码中的以下行并给出高度

  padding: 2px 0 10px 0;
  height:30px;

http://jsfiddle.net/58KmZ/2/

Answer 3

从你的css代码中删除填充

padding:

Answer 4

你应该增加高度并减少填充底部。如果你改变了，它就会显示出来。

height: 25px;
padding: 2px 0px 5px 0px;

下拉列表中未显示所选项目

4 个答案: