关于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 制作一个material-design 风格登录界面实例
Dec 12 HTML / CSS
Html5 实现微信分享及自定义内容的流程
Aug 20 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
html5 Canvas画图教程(5)—canvas里画曲线之arc方法
Jan 09 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
Apr 01 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
使用CSS连接数据库的方式
Feb 28 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 如何利用phpexcel导入数据库
2013/08/24 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
php使用memcoder将视频转成mp4格式的方法
2015/03/12 PHP
PHP从数组中删除元素的四种方法实例
2017/05/12 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
兼容Mozilla必须知道的知识。
2007/01/09 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
Jquery实现自定义弹窗示例
2014/03/12 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
js 动态给元素添加、移除事件的实现方法
2016/07/19 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
微信小程序 Video API实例详解
2016/10/02 Javascript
微信小程序 setData使用方法及常用错误解决办法
2017/05/11 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
vue.js 实现a标签href里添加参数
2019/11/12 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
Python微信操控itchat的方法
2019/05/31 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
html5 div布局与table布局详解
2016/11/16 HTML / CSS
司机的工作范围及职责
2013/11/13 职场文书
党支部书记四风问题整改措施
2014/09/24 职场文书
党员考试作弊检讨书1000字
2015/02/16 职场文书
Python实现对齐打印 format函数的用法
2022/04/28 Python
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang