下拉菜单水印与其他字段不同

the dropdown menu watermark is different from other fields

本文关键字：字段 其他 下拉菜单      更新时间：2023-09-26

我有一个申请登记表。其中有名字、姓氏、职业等。职业的水印是一个下拉菜单，与其他字段不同。它有点暗。我希望职业级别的水印应该与名字和姓氏水印相同。这是我的小提琴http://jsfiddle.net/JxfLw/。。。这是我的html和css代码

 <span class="sticky-placeholder-wrapper" style="position: relative; display: block;"><input type="text" id="txtFirst" title="First Name" class="newpost1" maxlength="25" tabindex="11" data-sticky-placeholder="*First Name"><label id="firstname" class="sticky-placeholder-label" for="txtFirst" style="color: rgb(0, 0, 0); cursor: text; font-family: futuraltbook; font-weight: 400; font-size: 14px; left: 6px; line-height: normal; opacity: 0.5; padding-left: 5px; padding-top: 3px; position: absolute; text-transform: none; top: 0px;">*First Name</label></span>
        <span class="sticky-placeholder-wrapper" style="position: relative; display: block;"><input type="text" id="txtLast" title="Last Name" class="newpost1" maxlength="25" tabindex="12" data-sticky-placeholder="*Last Name"><label id="firstname" class="sticky-placeholder-label" for="txtLast" style="color: rgb(0, 0, 0); cursor: text; font-family: futuraltbook; font-weight: 400; font-size: 14px; left: 6px; line-height: normal; opacity: 0.5; padding-left: 5px; padding-top: 3px; position: absolute; text-transform: none; top: 0px;">*Last Name</label></span>
            <select id="selMemberType" size="0" class="empty side space  selectPlaceholder" tabindex="13">
                <option value="0" selected="" disabled="">*Career Level</option>
<option value="1">Student</option>
            <option value="2">Entry Level</option>
            <option value="3">Experienced</option>
            <option value="4">Manager</option>
            <option value="5">Executive</option>
            <option value="6">Senior Executive</option>
            <option value="7">Senior Management Executive</option>
            <option value="8">Celebrity</option>
        </select>
#txtFirst, #txtLast {
border-top: 1px solid #666!important;
border-right: 1px solid #666;
border-bottom: 1px solid #c2c2c2;
border-left: 1px solid #666;
border-radius: 4px;
background-color: rgba(30,31,32,.58);
-webkit-box-shadow: inset 1px 1px 1px #555;
box-shadow: inset 1px 1px 1px #000;
float: none;
margin: 0 10px 10px 0;
padding: 0 0 0 5px;
}
#selMemberType {
height: 32px!important;
border-top: 1px solid #666;
border-right: 1px solid #666;
border-bottom: 1px solid #c2c2c2;
border-left: 1px solid #666;
border-radius: 4px;
background-color: rgba(30,31,32,.58);
-webkit-box-shadow: inset 1px 1px 1px #555;
box-shadow: inset 1px 1px 1px #000;
font: normal 18px futuraltbook!important;
clear: both;
margin: 0 0 10px 0;
padding: 0;
width: 545px;
}

既然你在标签中添加了js，我相信你接受了包含js的答案。但首先将此样式添加到您的css 中

.selectPlaceholder {
  color : #444;    
}
select option:not([disabled]) {
  color : #000;    
}

js代码

document.getElementById("selMemberType").onchange = function(){
  this.className = this.className.replace("selectPlaceholder","");
}

更新的FIDDLE

请更改#selMemberType中的一些css属性，如下所示

height: 20px!important;
font: normal 14px futuraltbook!important;
width: 240px;
相关文章：