html - 如何创建一个选择框占位符?

  显示原文与译文双语对照的内容

我使用的是文本输入的占位符,这很好。 但是我想为我的selectboxes使用一个占位符。 当然,我可以使用以下代码:


<select>
 <option value="">Select your option</option>
 <option value="hurr">Durr</option>
</select>

但是'选择你的选项'是黑色而不是 lightgrey 。 所以我的解决方案可能是 CSS-based 。 jQuery也很好。

这只在下拉( 单击箭头之后) 中设置了选项灰色:


option:first {
 color: #999;
}

编辑:问题是:人们如何在selectboxes中创建占位符? 但它已经被回答了,干杯。

在选中的值中使用的结果总是灰色( 即使选择了一个真实选项):


select {
 color:#999;
}

时间:

非 CSS - 没有 javascript/jquery回答?


<select>
 <option value="" disabled selected>Select your option</option>
 <option value="hurr">Durr</option>
</select>

刚刚发现了accross这个问题,这是 Firefox & Chrome 中的工作( 至少)


<select>
 <option value='' disabled selected style='display:none;'>Please Choose</option>
 <option value='0'>Open when powered (most valves do this)</option>
 <option value='1'>Closed when powered, auto-opens when power is cut</option>
</select>

禁用选项将停止用鼠标和键盘选择的选项,而只使用'显示:无'允许用户通过键盘箭头进行选择。 '显示:无'样式只是使列表框看起来是'nice'。

注意:在"占位符"选项上使用一个空的值属性允许验证( 所需属性) 在拥有"占位符"的周围工作,因此如果选项没有改变,那么浏览器应该提示用户从列表中选择一个选项。

类似这样的东西?

html :


<select id="choice">
 <option value="0" selected="selected">Choose...</option>
 <option value="1">Something</option>
 <option value="2">Something else</option>
 <option value="3">Another choice</option>
</select>

css:


#choice option { color: black; }
.empty { color: gray; }

javascript :


$("#choice").change(function () {
 if($(this).val() =="0") $(this).addClass("empty");
 else $(this).removeClass("empty")
});

$("#choice").change();

工作示例:http://jsfiddle.net/Zmf6t/

我有同样的问题,当搜索遇到这个问题时,在我找到好的解决方案之后,我想跟大家分享一下,以防有人能从中受益。 这里是:HTML:


<select class="place_holder dropdown">
 <option selected="selected" style=" display: none;">Sort by</option>
 <option>two</option>
 <option>something</option>
 <option>4</option>
 <option>5</option>
 </select>

css:


.place_holder{
 color: gray;
}
option{
 color: #000000;
}

JS:


jQuery(".dropdown").change(function () {
 jQuery(this).removeClass("place_holder");
 });

客户首先选择不需要灰色,所以JS删除类"place_holder"。 我希望这有助于某人:

更新: 感谢 @user1096901, 作为 IE 浏览器的变通工作,你可以再次添加"place_holder"类,以便再次选择:)

我看到了正确答案的符号,但这将是我的解决方案。


<select style="color:gray;">

<option style="display:none;" value="" disabled selected>Select your option</option>

<option style="color:black;" value="hurr">Durr</option>

</select>

代码有点不同,但可以用于你的目的。 希望它会帮助你。

类名"空白"将被删除从 stack, 逻辑上述评论中所述选定: 它是一样的,唯一的增加从我就是,当点击第一个选项选择标记端 tag. 所以我们可以把它当作一个placehoder来选择。


jQuery(document).ready(function() {

//custom selectbox
 jQuery("select").change(function() {
 var str ="";
 str = jQuery(this).find(":selected").text();
 jQuery(this).next(".out").text(str);
 }).trigger('change');

 jQuery("select").click(function() {
 var emp = jQuery(this).find(".empty").remove();
 });
});

.selectbox. empty,
.empty {
 color: #ccc;
}
.selectbox {
 background: url("http://www.spelthorne.gov.uk/media/list_image/q/9/arrow_icon_44x44-dark_blue.jpg") no-repeat scroll 95%;
 width: 220px;
 border: 2px solid #D1D1D1;
 border-radius: 5px 5px 5px 5px;
 float: right;
 height: 29px;
 margin-right: 15px;
}
.selectbox div {
 border-right: 2px solid #CCCCCC;
 cursor: pointer;
 height: 29px;
 overflow: hidden;
 padding: 1px 0 0 5px;
 width: 180px;
 z-index: -1;
}
.selectbox select {
 margin-top: 0;
 height: 31px;
 position: absolute;
 width: 220px;
 z-index: 2;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 -khtml-opacity: 0;
 -moz-opacity: 0;
 opacity: 0;
 cursor: pointer;
}

<div class="selectbox">
 <select>
 <option class="empty">Sort by</option>
 <option>two</option>
 <option>something</option>
 <option>4</option>
 <option>5</option>
 </select>

 <div class="out">Sort by</div>
</div>

给定的SELECTBOX类作为容器而不是用于逻辑用途。

JS中的另一个可能性:


 $('body').on('change','select', function (ev){
 if($(this).find('option:selected').val() ==""){
 $(this).css('color','#999');
 $(this).children().css('color','black');
 }
 else {
 $(this).css('color','black');
 $(this).children().css('color','black');
 }
});

JSFiddle

解决方案也适用于 Firefox:
没有任何 JS 。


option[default] {
 display: none;
}

<select>
 <option value="" default selected>Select Your Age</option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
 <option value="4">4</option>
</select>

对于必需的字段,在现代浏览器中有一个pure-CSS解决方案:


select:required:invalid {
 color: gray;
}
option[value=""][disabled] {
 display: none;
}
option {
 color: black;
}

<select required>
 <option value="" disabled selected>Select something...
 <option value="1">One
 <option value="2">Two
</select>
...