关于html选择框创建占位符的问题


Posted in HTML / CSS onJune 09, 2021

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

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

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

这只会使下拉菜单中的选项变为灰色(因此,单击箭头后):

option:first {
    color: #999;
}

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

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

select {
    color: #999;
}

解决方案:

非CSS-没有JavaScript / jQuery答案:

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

以上就是关于html选择框创建占位符的问题的详细内容,更多关于html选择框占位符的资料请关注三水点靠木其它相关文章!

 
HTML / CSS 相关文章推荐
常用的四种CSS透明属性介绍
Apr 12 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
HTML5的革新 结构之美
Jun 20 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
Jul 06 HTML / CSS
canvas实现按住鼠标移动绘制出轨迹的示例代码
Feb 05 HTML / CSS
Html5页面二次分享的实现
Jul 30 HTML / CSS
AmazeUI 图标的示例代码
Aug 13 HTML / CSS
html实现弹窗的实例
Jun 09 #HTML / CSS
html css3不拉伸图片显示效果
html2 canvas svg不能识别的解决方案
Jun 03 #HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 #HTML / CSS
CSS极坐标的实例代码
css height属性中的calc方法详解
Jun 03 #HTML / CSS
html+css实现文字折叠特效实例
You might like
Alliance vs AM BO3 第一场2.13
2021/03/10 DOTA
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
js数组去重的hash方法
2016/12/22 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
BootStrap Select清除选中的状态恢复默认状态
2017/06/20 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
2017/09/04 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
python字典排序实例详解
2015/05/20 Python
Python ValueError: invalid literal for int() with base 10 实用解决方法
2015/06/21 Python
Python制作词云的方法
2018/01/03 Python
Python多继承顺序实例分析
2018/05/26 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
python plotly绘制直方图实例详解
2019/07/22 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
python的Jenkins接口调用方式
2020/05/12 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
韩国最大的购物网站:Gmarket
2019/06/20 全球购物
运动会稿件300字
2014/02/14 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
市场开发计划书
2014/05/07 职场文书
推荐信格式范文
2014/05/09 职场文书
年度考核个人总结
2015/03/06 职场文书
酒店人事专员岗位职责
2015/04/07 职场文书
2015年幼儿教师个人工作总结
2015/05/20 职场文书
离婚上诉状范文
2015/05/23 职场文书
《思路决定出路》读后感3篇
2019/12/11 职场文书
JS的深浅复制详细
2021/10/16 Javascript