关于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实现字体颜色渐变的实现
Mar 09 HTML / CSS
CSS3中Transform动画属性用法详解
Jul 04 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
HTML5 本地存储实现购物车功能
Sep 07 HTML / CSS
html5 更新图片颜色示例代码
Jul 29 HTML / CSS
Html5大文件断点续传实现方法
Dec 05 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
CSS 实现Chrome标签栏的技巧
Aug 04 HTML / CSS
HTML常用标签超详细整理
Mar 19 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
网络资源
2006/10/09 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
2010/03/14 Javascript
javascript常用对话框小集
2013/09/13 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jQuery源码分析之Callbacks详解
2015/03/13 Javascript
浅谈javascript中的Function和Arguments
2016/08/30 Javascript
JavaScript基于扩展String实现替换字符串中index处字符的方法
2017/06/13 Javascript
js实现一个简单的MVVM框架示例
2018/01/15 Javascript
前后端如何实现登录token拦截校验详解
2018/09/03 Javascript
JavaScript解析及序列化JSON的方法实例分析
2019/01/04 Javascript
记一次用vue做的活动页的方法步骤
2019/04/11 Javascript
微信JS-SDK实现微信会员卡功能(给用户微信卡包里发送会员卡)
2019/07/25 Javascript
Vue.js如何使用Socket.IO的示例代码
2019/09/05 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
python pandas 如何替换某列的一个值
2018/06/09 Python
Python编程深度学习计算库之numpy
2018/12/28 Python
postman模拟访问具有Session的post请求方法
2019/07/15 Python
python 实现屏幕录制示例
2019/12/23 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
印度化妆品购物网站:Nykaa
2018/07/22 全球购物
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
Expedia西班牙:预订酒店、机票、旅行和廉价度假套餐
2019/04/10 全球购物
static全局变量与普通的全局变量有什么区别
2014/05/27 面试题
购房协议书
2014/04/11 职场文书
2014年人力资源部工作总结
2014/11/19 职场文书
2014年消防工作总结
2014/11/21 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
党支部培养考察意见
2015/06/02 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技