关于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 相关文章推荐
纯CSS3实现3D旋转书本效果
Mar 21 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 HTML / CSS
html5如何在Canvas中实现自定义路径动画示例
Sep 18 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
详解H5 活动页之移动端 REM 布局适配方法
Dec 07 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
video.js支持m3u8格式直播的实现示例
May 20 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
hessian 在PHP中的使用介绍
2010/12/13 PHP
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
html静态页面调用php文件的方法
2014/11/13 PHP
PHP常用技巧汇总
2016/03/04 PHP
php创建图像具体步骤
2017/03/13 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
Javascript调用C#代码
2011/01/17 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
浅谈javascript的url参数parse和build函数
2017/03/04 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
ES10的13个新特性示例(小结)
2019/09/23 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
在Python中marshal对象序列化的相关知识
2015/07/01 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
详解DeBug Python神级工具PySnooper
2019/07/03 Python
Python模拟FTP文件服务器的操作方法
2020/02/18 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
python 常见的排序算法实现汇总
2020/08/21 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
JD Sports西班牙:英国领先的运动服装公司
2020/01/06 全球购物
EJB与JAVA BEAN的区别
2016/08/29 面试题
出生医学证明样本
2014/01/17 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
全国法制宣传日活动总结2014
2014/11/01 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技
Win11怎么添加用户?Win11添加用户账户的方法
2022/07/15 数码科技