关于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 选择器 伪类选择器介绍
Jan 21 HTML / CSS
使用css3制作动感导航条示例
Jan 26 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
html5 实现客户端验证上传文件的大小(简单实例)
May 15 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
Apr 27 HTML / CSS
聊聊CSS粘性定位sticky案例解析
Jun 01 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和ACCESS写聊天室(十)
2006/10/09 PHP
PHP 创建文件(文件夹)以及目录操作代码
2010/03/04 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
PHP-CGI进程CPU 100% 与 file_get_contents 函数的关系分析
2011/08/15 PHP
基于在生产环境中使用php性能测试工具xhprof的详解
2013/06/03 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
PHP获取指定时间段之间的 年,月,天,时,分,秒
2016/06/05 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
jQuery获得内容和属性示例代码
2014/01/16 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
jQuery中trigger()与bind()用法分析
2015/12/18 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
python版本的读写锁操作方法
2016/04/25 Python
python查询mysql,返回json的实例
2018/03/26 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python 多线程重启方法
2019/02/18 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
Python实现代码块儿折叠
2020/04/15 Python
python 实用工具状态机transitions
2020/11/21 Python
留学经费担保书
2014/05/12 职场文书
解决python3安装pandas出错的问题
2021/05/20 Python
golang为什么要统一错误处理
2022/04/03 Golang