如何为“选择”框创建占位符？

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

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

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

这只会使下拉列表中的选项变灰（因此单击箭头后）：

option:first {
    color: #999;
}

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

使用此选项会导致所选值始终为灰色（即使在选择实际选项后）：

select {
    color: #999;
}

当前回答

选择：焦点选项。文件夹{显示：无；}<选择><option selected=“selected”class=“holder”>请选择</option><option value=“1”>选项#1</option><option value=“2”>选项#2</option></选择>

2016-11-15 06:00:25

其他回答

我刚刚偶然发现了这个问题，下面是Firefox和Chrome的工作原理（至少）：

禁用选项可停止使用鼠标和键盘选择＜option＞，而仅使用“display：none”允许用户仍然通过键盘箭头进行选择。“display:none”样式只是让列表框看起来“不错”。

注意：在“占位符”选项上使用空值属性允许验证（必需属性）绕过“占位符”，因此如果选项未更改，但是必需的，则浏览器应提示用户从列表中选择一个选项。

更新（2015年7月）：

确认此方法在以下浏览器中有效：

谷歌Chrome-v.43.0.2357.132Mozilla Firefox-第39.0版Safari-v.8.0.7（占位符在下拉列表中可见，但不可选择）Microsoft Internet Explorer-v.11（占位符在下拉列表中可见，但不可选择）Project Spartan-v.15.10130（占位符在下拉列表中可见，但不可选择）

更新（2015年10月）：

我删除了style=“display:none”，改为支持广泛的HTML5属性hidden。隐藏元素具有与显示类似的特性：在Safari、Internet Explorer和（Project Spartan需要检查）中都没有，在下拉列表中该选项可见，但不可选择。

更新（2016年1月）：

当需要select元素时，它允许使用：invalid CSS伪类，该类允许您在select元素处于“占位符”状态时设置其样式。：由于占位符选项中的值为空，因此此处无效。

设置值后，将删除：invalid伪类。如果您愿意，也可以选择使用：valid。

大多数浏览器都支持这个伪类。Internet Explorer 10及更高版本。这对于自定义样式的选择元素最有效；在某些情况下，例如（Mac在Chrome/Safari中），您需要更改选择框的默认外观，以便显示某些样式，例如背景色和颜色。您可以在developer.mozilla.org上找到一些关于兼容性的示例和更多信息。

Chrome中的原生元素外观Mac：

在Chrome中使用更改的边框元素Mac：

2011-12-09 08:22:14

2016-11-15 06:00:25

对于必填字段，现代浏览器中有一个纯CSS解决方案：

select：必需：无效{颜色：灰色；}选项[value=“”][disabled]{显示：无；}期权{颜色：黑色；}<选择所需><option value=“”disabled selected>选择一些</选项><option value=“1”>一个</option><option value=“2”>两个</option></选择>

2015-04-22 18:30:20

Angular 2的解决方案

在所选内容的顶部创建标签

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

并应用CSS将其放置在顶部

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

指针事件：none允许您在单击标签时显示select，当您选择选项时隐藏该选项。

角度html css

2019-04-18 12:54:54

我不满足于仅使用HTML/CSS的解决方案，所以我决定使用JavaScript创建一个自定义选择。

这是我在过去30分钟里写的，因此可以进一步改进。

您所要做的就是创建一个简单的列表，其中包含很少的数据属性。代码自动将列表转换为可选择的下拉列表。它还添加了一个隐藏的输入以保存所选值，因此可以在表单中使用。

输入：

<ul class="select" data-placeholder="Role" data-name="role">
  <li data-value="admin">Administrator</li>
  <li data-value="mod">Moderator</li>
  <li data-value="user">User</li>
</ul>

输出：

<div class="ul-select-container">
    <input type="hidden" name="role" class="hidden">
    <div class="selected placeholder">
        <span class="text">Role</span>
        <span class="icon">▼</span>
    </div>
    <ul class="select" data-placeholder="Role" data-name="role">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

假定为占位符的项的文本将灰显。占位符是可选的，以防用户想要恢复其选择。同样使用CSS，select的所有缺点都可以被克服（例如，选项的样式无法设置）。

//帮助程序功能可更快/更轻松地创建元素// https://github.com/akinuri/js-lib/blob/master/element.jsvar elem=函数（tagName、属性、子项、isHTML）{让父母；if（tagName类型==“string”）{parent=document.createElement（tagName）；}else if（HTMLElement的tagName实例）{parent=tagName；}if（属性）{for（属性中的let属性）{parent.setAttribute（属性，属性[attribute]）；}}var isHTML=isHTML||null；if（children || children==0）{elem.append（父级、子级、isHTML）；}返回父项；};elem.append=函数（父级、子级、isHTML）{if（HTMLTextAreaElement的父实例|| HTMLInputElement的父示例）{if（文本的子实例||typeof children==“string”||typeofchildren===“number”）{parent.value=子项；}else if（数组的子实例）{children.forEach（函数（child）{elem.append（父级，子级）；});}else if（typeof children==“function”）{elem.append（父级，子级（））；}}其他{if（HTMLElement的子实例||文本的子实例）{parent.appendChild（children）；}否则如果（typeof children==“string”| | typeof children==“number”）{if（isHTML）{parent.innerHTML+=子级；}其他{parent.appendChild（document.createTextNode（children））；}}else if（数组的子实例）{children.forEach（函数（child）{elem.append（父级，子级）；});}else if（typeof children==“function”）{elem.append（父级，子级（））；}}};//初始化页面上的所有选择$（“ul.select”）.each（函数）{var parent=this.parentElement；var refElem=this.nextElementSibling；var container=elem（“div”，｛“class”：“ul select container”｝）；var hidden=elem（“input”，｛“type”：“hidden”，“name”：this.dataset.name，“class”：“隐藏”｝）；var selected=elem（“div”，｛“class”：“selected placeholder”｝[elem（“span”，｛“class”：“text”｝，this.dataset.placeholder），elem（“span”，｛“class”：“icon”｝，“&#9660；”，true），]);var placeholder=elem（“li”，｛“class”：“placeholder”｝，this.dataset.placeholder）；this.insertBefore（占位符，this.children[0]）；container.appendChild（隐藏）；container.appendChild（选中）；container.appendChild（this）；parent.insertBefore（容器，refElem）；});//使用所选选项更新必要的元素$（“.ul选择容器ul li”）.on（“单击”，函数（）{var text=this.innerText；var value=this.dataset.value | |“”；var selected=this.parentElement.previousElementSibling；var hidden=selected.previousElementSibling；hidden.value=selected.dataset.value=值；selected.children[0].innerText=文本；if（this.classList.incontains（“占位符”））{selected.classList.add（“占位符”）；}其他{selected.classList.remove（“占位符”）；}selected.parentElement.classList.remove（“可见”）；});//打开选择下拉列表$（“.ul select container.selected”）.on（“单击”，函数（）{if（this.parentElement.classList.incontains（“可见”））{this.parentElement.classList.remove（“可见”）；}其他{this.parentElement.classList.add（“可见”）；}});//焦点丢失时关闭选择$（文档）.on（“点击”，功能（e）{var container=$（e.target）最近（“.ul select container”）；如果（container.length==0）{$（“.ul select container.visible”）.removeClass（“可见”）；}});.ul选择容器{宽度：200px；显示：表格；位置：相对；边距：1em 0；}.ul-select-container.visible ul{显示：块；填充：0；列表样式：无；边距：0；}.ul选择容器ul{背景色：白色；边框：1px实心hsla（0，0%，60%）；边框顶部：无；-webkit用户选择：无；显示：无；位置：绝对；宽度：100%；z指数：999；}.ul选择容器ul li{衬垫：2px 5px；}.ul选择容器ul li.placeholder{不透明度：0.5；}.ul选择容器ul li：悬停{背景色：闪避蓝；颜色：白色；}.ul选择容器ul li占位符：悬停{背景色：rgba（0、0、0和.1）；颜色：初始；}.ul选择容器。已选择{背景色：白色；填充：3px 10px 4px；衬垫：2px 5px；边框：1px实心hsla（0，0%，60%）；-webkit用户选择：无；}.ul选择容器。已选择{显示：柔性；调整内容：间距；}.ul选择容器.selected.placeholder.text{颜色：rgba（0、0、0和.5）；}.ul选择容器已选择图标{字体大小：.7em；显示：柔性；对齐项目：居中；不透明度：0.8；}.ul选择容器：悬停.selected{边框：1px实心hsla（0，0%，30%）；}.ul选择容器：悬停选定图标{不透明度：1；}<script src=“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></script><ul class=“select”数据占位符=“Role”数据名称=“Role”><li data value=“admin”>管理员</li><li data value=“mod”>主持人</li><li data value=“user”>用户</li></ul><ul class=“select”数据占位符=“Sex”数据名称=“Sex”><li data value=“male”>男性</li><li数据值=“female”>女性</li></ul>

更新：我改进了这一点（使用向上/向下/输入键进行选择），稍微整理了一下输出，并将其转换为对象。电流输出：

<div class="li-select-container">
    <input type="text" readonly="" placeholder="Role" title="Role">
    <span class="arrow">▼</span>
    <ul class="select">
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li data-value="user">User</li>
    </ul>
</div>

初始化：

new Liselect(document.getElementsByTagName("ul")[0]);

进一步检查：JSFiddle，GitHub（已重命名）。

更新：我已经重写了一遍。我们可以只使用select，而不使用列表。这样，即使没有JavaScript（如果禁用），它也可以工作。

输入：

<select name="role" data-placeholder="Role" required title="Role">
    <option value="admin">Administrator</option>
    <option value="mod">Moderator</option>
    <option>User</option>
</select>

new Advancelect(document.getElementsByTagName("select")[0]);

输出：

<div class="advanced-select">
    <input type="text" readonly="" placeholder="Role" title="Role" required="" name="role">
    <span class="arrow">▼</span>
    <ul>
        <li class="placeholder">Role</li>
        <li data-value="admin">Administrator</li>
        <li data-value="mod">Moderator</li>
        <li>User</li>
    </ul>
</div>

JSFiddle，GitHub。

2018-06-13 14:58:43

如何为“选择”框创建占位符？

推荐文章

最新文章

标签