关于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 mask遮罩实现一些特效
Oct 24 HTML / CSS
CSS3教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
纯CSS3制作页面切换效果的实例代码
May 30 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
Jan 30 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
HTML5 新表单类型示例代码
Mar 20 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
PHP正则匹配日期和时间(时间戳转换)的实例代码
2016/12/14 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
jQuery源码分析-01总体架构分析
2011/11/14 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
JavaScript与DOM组合动态创建表格实例
2012/12/23 Javascript
JS简单的轮播的图片滚动实例
2013/06/17 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
jQuery的cookie插件实现保存用户登陆信息
2014/04/15 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
jQuery实现的图片分组切换焦点图插件
2015/01/06 Javascript
jquery背景跟随鼠标滑动导航
2015/11/20 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
使用NodeJs 开发微信公众号(三)微信事件交互实例
2016/03/02 NodeJs
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
react.js使用webpack搭配环境的入门教程
2017/08/14 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
[05:03]2018DOTA2亚洲邀请赛主赛事首日回顾
2018/04/04 DOTA
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
Using Django with GAE Python 后台抓取多个网站的页面全文
2016/02/17 Python
Python爬虫常用小技巧之设置代理IP
2018/09/13 Python
浅谈Python 函数式编程
2020/06/20 Python
俄罗斯领先的移动和数字设备在线商店:Svyaznoy.ru
2020/12/21 全球购物
办公室文书岗位职责
2013/12/16 职场文书
北京大学中文系教授推荐的10本小说
2019/08/08 职场文书
深入理解python多线程编程
2021/04/18 Python
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js
vue实现简易音乐播放器
2022/08/14 Vue.js