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

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

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

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

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

当前回答

使用类名包,这里有一个与我的React功能组件一起工作的解决方案。我的组件使用钩子,但这可能对解决方案并不重要。这种方法是基于类的解决方案的一种功能性模仿。。。https://www.derpturkey.com/select-placeholder-with-react/

组件JS。。。

function NavBar(props, prevProps) {
            const ClassNames = require("classnames");  // package needs require rather than import
            const [where, changeWhere] = useState("");  // my component's value
            // classnames will add placeholderSelect class if chosen option's value is empty
            let whereClass = ClassNames("myOtherStyleRules", {
                placeholderSelect: !where,
            });
            ...
            return (
            ...
            <div id="where">
                            <select
                              className={whereClass}
                              value={where}
                              ...
                            >
                              <option value="" hidden> where? </option>    //  value must be empty, hidden from choice
                              <option value="24">Anchorage</option>
                              <option value="27">Birmingham</option>
                              <option value="28">Detroit</option>
                              <option value="25">Los Angeles</option>
                              <option value="26">Oahu</option>
                              <option value="29">Seattle</option>
                            </select>
                ... 

组件CSS。。。

        .placeholderSelect {
          color: rgb(167, 167, 167);
        }

其他回答

以下解决方案也适用于Firefox,无需任何JavaScript:

选项[默认值]{显示:无;}<选择><option value=“”默认选择>选择您的年龄</option><option value=“1”>1</option><option value=“2”>2</option><option value=“3”>3</option><option value=“4”>4</option></选择>

由于本主题中提供的答案之间的样式和功能不同,下表阐明了所提供的HTML、HTML+CSS和HTML+CSS+Javascript解决方案的样式和适用的表单逻辑。

我不得不使用代码格式,因为出于某种原因,标记中不允许使用表。将使用代码段提供一个HTML表来解决表限制。

我将这篇文章标记为社区维基,这样任何人都可以详细介绍新的文章,但请将JQuery、React、Angular、CoffeeScript等添加到另一篇文章中,以保持此表的简单。

         | Technologies |                                                                Styling                                                                |
  Post   | CSS | Java-  | Select: Placeholder |  Select: valid option  |                  Option: placeholder                    |     Option: valid option     |
   ID    |     | script | Color |  Validation | Color |    Required    | Visibility | Selectable | Color |   Cond. formatting    | Color |   Cond. formatting   |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
41167307 | No  |   No   | Black |   Invalid   | Black |      Yes       |  Visible   |     No     | Grey  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50200912 | No  |   No   | Black |    Valid    | Black |       No       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5859221  | No  |   No   | Black |    Valid    | Black |       No       |  Visible   |     No     | Grey  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
38120777 | No  |   No   | Black |    Valid    | Black |       No       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
54860799 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
52661024 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
8442831  | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
29806043 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
61966461 | Yes |   No   | Grey  |   Invalid   | Black |      Yes       | Invisible  |    N/A     |  N/A  | select:valid{visible} | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
44406771 | Yes |   No   | Grey  |   Invalid   | Grey  |      No        |  Visible   |     No     | Grey  |          No           | Black | select:invalid{Grey} |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
40603035 | Yes |   No   | Black |    Valid    | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
22994211 | Yes |   No   | Grey  |    Valid    | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
21722343 | Yes |   No   | Grey  |    Valid    | Grey  |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
48960650 | Yes |  Yes   | Grey  |   Invalid   | Black |      No        | Invisible  |    N/A     |  N/A  |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
5805194  | Yes |  Yes   | Grey  |    Valid    | Black |      No        |  Visible   |    Yes     | Black |          No           | Black |          No          |
-----------------------------------------------------------------------------------------------------------------------------------------------------------------
50840409 | Yes |  Yes   | Grey  |    Valid    | Black |      Yes       |  Visible   |    Yes     | Grey  |          No           | Black |          No          |

请尝试以下更改:

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

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

如果是占位符,则为灰色不需要选择能够变回灰色(值=“”)没有外部库(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></选择>

这里有一个工作得很好的CSS解决方案。内容被添加(并且相对于容器绝对定位)在包含元素之后(通过:在伪类之后)。

它从我使用指令时定义的占位符属性(attr(占位符))中获取文本。另一个关键因素是指针事件:无-这允许单击占位符文本传递到选择。否则,如果用户单击文本,它不会下降。

我自己在select指令中添加了.empty类,但通常我发现angular为我添加/删除.ng是空的(我认为这是因为我在代码示例中注入了1.2版本的angular)。

(示例还演示了如何在AngularJS中包装HTML元素以创建自己的自定义输入)

var app=角度模块(“soDemo”,[]);app.controller(“soDemoController”,函数($scope){var vm={};vm.names=[{id:1,name:“乔恩”},{id:2,name:'乔'}, {id:3,name:“Bob”}, {id:4,name:'Jane'}];vm.nameId;$scope.vm=vm;});app.指令('soSelect',函数soSelect(){var指令={限制:'E',require:'ngModel',范围:{“valueProperty”:“@”,“displayProperty”:“@”,“modelProperty”:“=”,“源”:“=”,},链接:链接,模板:getTemplate};return指令;/////////////////////////////////函数链接(范围、元素、属性、ngModelController){init();回来/////////////实施函数init(){initDataBinding();}函数initDataBinding(){ng模型控制器$render=函数(){if(scope.model==ngModelController.$viewValue)返回;scope.model=ngModelController$viewValue;}范围$watch('model',函数(newValue){if(newValue==未定义){element.addClass('empty');回来}element.removeClass('empty');ng模型控制器$setViewValue(newValue);});}}函数getTemplate(元素,属性){var属性=['ng模型=“模型”','ng必需=“true”'];if(angular.isDefined(attrs.placeholder)){attributes.push('占位符=“{{占位符}}”');}var ngOptions=“”;if(angular.isDefined(attrs.valueProperty)){ngOptions+=“项。”+attrs.valueProperty+“as”;}ngOptions+=“项。”+attrs.displayProperty+'源中的项';ngOptions+=“”;attributes.push('ng-options=“'+ngOptions+'”');var html='<select'+attributes.join('')+'></select>';返回html;}});所以选择{位置:相对;}所以选择select{字体系列:'Helvetica';显示:内联块;高度:24px;宽度:200px;填充:0 1px;字体大小:12px;颜色:#222;边框:1px实心#c7c7c7;边界半径:4px;}所以选择.空:之前{字体系列:'Helvetica';字体大小:12px;内容:属性(占位符);位置:绝对;指针事件:无;左:6px;顶部:3px;z索引:0;颜色:#888;}<script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js“></script><div ng app=“soDemo”ng controller=“soDemoController”><so select value property=“id”display property=“name”source=“vm.names”ng model=“vm.nameId”placeholder=“(select name)”></so select></div>