我在文本输入中使用占位符,效果很好。但我也希望在选择框中使用占位符。当然,我可以使用以下代码:

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

但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。

这只会使下拉列表中的选项变灰(因此单击箭头后):

option:first {
    color: #999;
}

问题是:人们如何在选择框中创建占位符?但这已经得到了回应,欢呼。

使用此选项会导致所选值始终为灰色(即使在选择实际选项后):

select {
    color: #999;
}

当前回答

您可以将第一个选项的颜色设置为灰色,将其显示设置为无,将选择的颜色设置成灰色,并向其添加一个将其颜色设置为黑色的输入事件侦听器。

选择>选项:不(:第一个类型){颜色:黑色;}<select style='color:gray'on输入='style.color=“black”'><option style='display:none'>选择一个选项</选项><选项>1.</选项><选项>2.</选项><选项>3.</选项></选择>

使用customElement API:

class placeholderSelect扩展了HTMLElement{已连接Callback(){this.innerHTML=`<select style='color:gray'on输入='style.color=“black”'><option style='display:none'>${this.getAttribute('data-placeholder')}</选项>${this.innerHTML}</select>`;Array.from(this.children[0].childress).forEach(函数(el,i){el.style.color=“黑色”;});}}customElements.define('占位符选择',占位符选择);<placeholder select data placeholder=“选择选项”><选项>1.</选项><选项>2.</选项><选项>3.</选项></占位符选择>

其他回答

为选择元素输入[type=“text”]样式占位符

以下解决方案模拟占位符,因为它与input[type=“text”]元素相关:

$('.example').change(函数(){$(this).css('color',$(this).val()=='?'#999' : '#555');});.示例{颜色:#999;}.example>选项{颜色:#555;}.example>选项[value=“”]{颜色:#999;}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><select class=“example”><option value=“”>选择选项</option><option>选项1</option><option>选项2</option><option>选项3</option></选择>

好的,在我的案例中,有一个很有用,它的特点(与公认的答案相反):

如果是占位符,则为灰色不需要选择能够变回灰色(值=“”)没有外部库(jquery等)

如果值不是“”,则需要一个小JS函数将其更改为灰色/黑色。注释中解释了JS。。没有注释,只有几行代码。通过将其放在函数中,它将适用于该类的所有复选框。。

函数checkSelectboxes(){//选中所有复选框,这里我根据类名选择这样做let selectboxes=document.querySelectorAll('.form select');//循环浏览所有复选框(这次只有一个)selectboxes.forEach(sb=>{//将eventlistener添加到每个复选框sb.addEventListener('change',函数(e){//如果此复选框的值不是“”,则添加类,否则:删除它。e.target.value=="" ? e.target.classList.add('changed'):e.target.cclassList.remove('changed');})})}//调用函数checkSelectboxes();.表单选择{颜色:#ccc;}.form-select已更改{颜色:#000}.form选择选项{颜色:#000;}.form select选项:第一个类型{颜色:#ccc;}<!-- 给第一个选项一个空值,并将其设置为selected--><select type=“text”class=“form select”><option value=“”selected>--我的占位符--</option><option>1 lorem--</option><option>2ipsum--</option><option>3多尔--</option></选择>

您需要表单验证,现代浏览器从头开始就提供了这一功能。

因此,您不必担心用户无法选择字段。因为当他这样做时,浏览器验证会告诉他,这是一个错误的选择。

浏览器内置的验证函数checkValidatity()。

Bootstrap也有一个很好的例子。

HTML

<form class="needs-validation">
  <select required>
    <option value="">Please select an option</option>
    <option value="1">Foo</option>
    <option value="2">Bar</option>
  </select>
<form>

Java脚本

form = document.getElementByClassName('needs-validation');
if(form.checkValidity() === true) {
  //form validation succeeded
} else {
  //form validation failed
}

请尝试以下更改:

$("select").css("color", "#757575");
$(document).on("change", "select", function(){
    if ($(this).val() != "") {
        $(this).css("color", "");
    } 
    else {
        $(this).css("color", "#757575");
    }
});

看到这个答案:

<select>
        <option style="display: none;" value="" selected>SelectType</option>
        <option value="1">Type 1</option>
        <option value="2">Type 2</option>
        <option value="3">Type 3</option>
        <option value="4">Type 4</option>
</select>