关于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 相关文章推荐
HTML5如何适配 iPhone IOS 底部黑条
Mar 09 HTML / CSS
前端制作动画的几种方式(css3,js)
Dec 12 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
Jan 22 HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
AmazeUI 加载进度条的实现示例
Aug 20 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
Jan 14 HTML / CSS
能用CSS实现的就不要麻烦JavaScript了
Oct 05 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
PHPExcel内存泄漏问题解决方法
2015/01/23 PHP
Zend Framework教程之Resource Autoloading用法实例
2016/03/08 PHP
php mysqli查询语句返回值类型实例分析
2016/06/29 PHP
一个实用的php验证码类
2017/07/06 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
JavaScript 设计模式之组合模式解析
2010/04/09 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
Jquery的hover方法让鼠标经过li时背景变色
2013/09/06 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
浅谈javascript中new操作符的原理
2016/06/07 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
2017/01/18 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
JavaScript中的一些隐式转换和总结(推荐)
2017/12/22 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
vue接通后端api以及部署到服务器操作
2020/08/13 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
基python实现多线程网页爬虫
2015/09/06 Python
Python 元组操作总结
2019/09/18 Python
python中adb有什么功能
2020/06/07 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
CSS3 按钮边框动画的实现
2020/11/12 HTML / CSS
中国领先的专业家电网购平台:国美在线
2016/12/25 全球购物
大学生职业规划范文:象牙塔生活的四年计划
2014/01/14 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
教师岗位职责
2015/02/03 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书