关于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 相关文章推荐
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 HTML / CSS
详解CSS3的box-shadow属性制作边框阴影效果的方法
May 10 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 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多文件上传实例
2015/07/09 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
php 使用html5实现多文件上传实例
2016/10/24 PHP
关于PHP通用返回值设置方法
2017/03/31 PHP
JS查看对象功能代码
2008/04/25 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
仿新浪微博返回顶部的jquery实现代码
2012/10/01 Javascript
AngularJS基础学习笔记之指令
2015/05/10 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
详解jenkins自动化部署vue
2019/05/14 Javascript
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
python3实现点餐系统
2019/01/24 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
html5的新玩法——语音搜索
2013/01/03 HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
2019/07/26 HTML / CSS
Shell脚本如何向终端输出信息
2014/04/25 面试题
毕业生动漫设计求职信
2013/10/11 职场文书
农民工工资承诺书范文
2014/03/31 职场文书
个人合作协议书范本
2014/04/18 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
2016年中学端午节主题活动总结
2016/04/01 职场文书