关于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 相关文章推荐
使用JS+CSS3技术:让你的名字动起来
Apr 27 HTML / CSS
CSS3中颜色线性渐变实战
Jul 18 HTML / CSS
CSS3实现线性渐变用法示例代码详解
Aug 07 HTML / CSS
html5仿支付宝密码框的实现代码
Sep 06 HTML / CSS
使用jTopo给Html5 Canva中绘制的元素添加鼠标事件
May 15 HTML / CSS
HTML5本地存储之Web Storage详解
Jul 04 HTML / CSS
html5唤起app的方法
Nov 30 HTML / CSS
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
Aug 01 HTML / CSS
Html5 webview元素定位工具的实现
Aug 07 HTML / CSS
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
Aug 24 HTML / CSS
详解如何解决H5开发使用wx.hideMenuItems无效果不生效
Jan 20 HTML / CSS
CSS的calc函数用法小结
Jun 25 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
php基础知识:函数基础知识
2006/12/13 PHP
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
2013/01/29 Javascript
Jquery实现搜索框提示功能示例代码
2013/08/13 Javascript
javascript强大的日期函数代码分享
2013/09/04 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
使用VS开发 Node.js指南
2015/01/06 Javascript
jQuery点缩略图弹出层显示大图片
2015/02/13 Javascript
深入学习jQuery Validate表单验证
2016/01/18 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
easyUI实现类似搜索框关键词自动提示功能示例代码
2016/12/27 Javascript
Vue.js bootstrap前端实现分页和排序
2017/03/10 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
electron实现静默打印的示例代码
2019/08/12 Javascript
vuex管理状态仓库使用详解
2020/07/29 Javascript
Nuxt.js nuxt-link与router-link的区别说明
2020/11/06 Javascript
python中readline判断文件读取结束的方法
2014/11/08 Python
Python读写文件方法总结
2015/06/09 Python
python实现给微信指定好友定时发送消息
2019/04/29 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
canvas实现圆形进度条动画的示例代码
2017/12/26 HTML / CSS
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
关于Java String的一道面试题
2013/09/29 面试题
2014年初一班主任工作总结
2014/11/08 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python