关于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 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
CSS3制作ajax loader icon实现思路及代码
Aug 25 HTML / CSS
利用纯CSS3实现动态的自行车特效源码
Jan 20 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
html5需遵循的6个设计原则
Apr 27 HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 HTML / CSS
Html5 滚动穿透的方法
May 13 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+AJAX聊天程序[聊天室]提供下载
2007/07/21 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
Laravel使用memcached缓存对文章增删改查进行优化的方法
2016/10/08 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
一个基于jQuery的树型插件(OrangeTree)使用介绍
2012/05/03 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
VUEJS实战之构建基础并渲染出列表(1)
2016/06/13 Javascript
详细分析Javascript中创建对象的四种方式
2016/08/17 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
JS基础之逻辑结构与循环操作示例
2020/01/19 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
Python 面试中 8 个必考问题
2018/11/16 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
CSS3 旋转立方体问题详解
2020/01/09 HTML / CSS
美国祛痘、抗衰老药妆品牌:Murad
2016/08/27 全球购物
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
公司总经理岗位职责
2014/03/15 职场文书
陕西导游词
2015/02/04 职场文书
股东合作协议书模板2篇
2019/11/05 职场文书
为什么node.js不适合大型项目
2021/04/28 Javascript
openstack云计算keystone组件工作介绍
2022/04/20 Servers