我在文本输入中使用占位符,效果很好。但我也希望在选择框中使用占位符。当然,我可以使用以下代码:
<select>
<option value="">Select your option</option>
<option value="hurr">Durr</option>
</select>
但“选择您的选项”是黑色而不是浅灰色。所以我的解决方案可能是基于CSS的。jQuery也很好。
这只会使下拉列表中的选项变灰(因此单击箭头后):
option:first {
color: #999;
}
问题是:人们如何在选择框中创建占位符?但这已经得到了回应,欢呼。
使用此选项会导致所选值始终为灰色(即使在选择实际选项后):
select {
color: #999;
}
我刚刚偶然发现了这个问题,下面是Firefox和Chrome的工作原理(至少):
<style>选择:无效{颜色:灰色;}</style><表单><选择所需><option value=“”禁用所选隐藏>请选择</选项><option value=“0”>通电时打开(大多数阀门都这样做)</option><option value=“1”>通电时关闭,断电时自动打开</option></选择></form>
禁用选项可停止使用鼠标和键盘选择<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:
在Angular中,我们可以添加一个选项作为占位符,它可以隐藏在选项下拉列表中。我们甚至可以添加一个自定义下拉图标作为背景,代替浏览器下拉图标。
技巧是仅在未选择值时启用占位符css
/**我的组件模板*/
<div class="dropdown">
<select [ngClass]="{'placeholder': !myForm.value.myField}"
class="form-control" formControlName="myField">
<option value="" hidden >Select a Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
/**我的组件.TS*/
constructor(fb: FormBuilder) {
this.myForm = this.fb.build({
myField: ''
});
}
/**全局.scss*/
.dropdown {
width: 100%;
height: 30px;
overflow: hidden;
background: no-repeat white;
background-image:url('angle-arrow-down.svg');
background-position: center right;
select {
background: transparent;
padding: 3px;
font-size: 1.2em;
height: 30px;
width: 100%;
overflow: hidden;
/*For moz*/
-moz-appearance: none;
/* IE10 */
&::-ms-expand {
display: none;
}
/*For chrome*/
-webkit-appearance:none;
&.placeholder {
opacity: 0.7;
color: theme-color('mutedColor');
}
option {
color: black;
}
}
}
我遇到了同样的问题,在搜索时我遇到了这个问题,在我找到了一个好的解决方案后,我想和你们分享一下,以防有人从中受益。
这里是:
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;
}
JavaScript:
jQuery(".dropdown").change(function () {
jQuery(this).removeClass("place_holder");
});
在客户进行第一次选择后,不需要灰色,因此JavaScript代码删除了place_holder类。
多亏了@user1096901,作为Internet Explorer浏览器的解决方案,您可以再次添加place_holder类,以防再次选择第一个选项:)
使用类名包,这里有一个与我的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);
}
这里有一个工作得很好的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>