【css】select实现placeholder效果

场景:使用select下拉选择框的时候,需要像其他控件一样提示默认信息。

问题:表单控件select没有placeholder属性。 

解决方案:通过css实现,不需要js

<style>select > option[disabled]{ color:#999;cursor: not-allowed }/**禁止项的样式**/select > option[hidden]{ display: none }/**隐藏项的样式**/
</style><div class="row"><label class="control-label">语言种类</label><select class="form-control" ng-model="vm.languageType"><option value="" hidden>请选择</option><!--hidden实质就是设置了display: none--><!--<option value="" style="display: none;">请选择</option>--><option value="11">普通话</option><option value="22">英语</option><option value="33">俄语</option><option value="44">法语</option></select><select class="form-control" ng-model="vm.skillLevel"><option value="" disabled>熟练水平</option><option value="1">一般</option><option value="2">熟练</option><option value="3">精通</option></select>
</div>

 

 

其他表单控件的placeholder有初始颜色,select也需要设置成相同样式:

<style>/**此处我用的angular,控件上有ng-pristine表示初始状态,直接设置成同其他控件placeholder一样的样式**/.form-control::placeholder {color: #999;opacity: 1;}select.ng-pristine{color: #999;opacity: 1;}
</style>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/650652.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

安卓和ios设置自己的短链

ios 的info.plist文件 设置 CFBundleURLSchemes 其中konnect 就是设置app的短链名称 <array><dict><key>CFBundleTypeRole</key><string>Editor</string><key>CFBundleURLName</key><string>org.konnect.app</str…

网络安全之防范钓鱼邮件

随着互联网的快速发展&#xff0c;新的网络攻击形式“网络钓鱼”呈现逐年上升的趋势&#xff0c;利用网络钓鱼进行欺骗的行为越来越猖獗&#xff0c;对互联网的安全威胁越来越大。网络钓鱼最常见的欺骗方式就是向目标群体发送钓鱼邮件&#xff0c;而邮件标题和内容&#xff0c;…

为什么要存在零欧姆电阻?

一般为五十好欧 零欧姆电阻的作用&#xff1a; 零欧姆参考的阻值&#xff1a; 零欧姆电阻的过载能力&#xff1a; 完&#xff01;

User Agent 解析:它是什么以及工作原理

什么是User Agent? UserAgent&#xff0c;简称UA&#xff0c;是一个使服务器能够识别用户使用的浏览器类型、版本以及运行浏览器的操作系统等信息的字符串。它作为浏览器请求头部信息的一部分发送给服务器&#xff0c;以便服务器可以返回合适格式和版本的内容。 跟Cookie一样…

uniapp对uni.request()的封装以及使用

官方文档 uni.request(OBJECT) | uni-app官网 (dcloud.net.cn) uni.request参数 参数名说明url是写api地址的data是用来传值的对于 GET 方法&#xff0c;会将数据 转换为 query string。例如 { name: name, age: 18 } 转换后的结果是 namename&age18。对于 POST 方法且 …

pytorch-激活函数与GPU加速

目录 1. sigmod和tanh2. relu3. Leaky Relu4. selu5. softplus6. GPU加速7. 使用GPU加速手写数据训练 1. sigmod和tanh sigmod梯度区间是0&#xff5e;1&#xff0c;当梯度趋近0或者1时会出现梯度弥散的问题。 tanh区间时-1&#xff5e;1&#xff0c;是sigmod经过平移和缩放而…

python爬虫插件XPath的安装

概要 XPath Helper是一款专用于chrome内核浏览器的实用型爬虫网页解析工具。XPath可以轻松快捷地找到目标信息对应的Xpath节点&#xff0c;获取xpath规则&#xff0c;并提取目标信息&#xff0c;并进行校对测试&#xff1b;可对查询出的xpath进行编辑&#xff0c;正确编辑的结…

【微信支付】前端 JSAPI 时序图及代码实现 Hook,微信内置浏览器,公众号开发

主要参数都是从后端获取的&#xff0c;非常考验后端的签名&#xff0c;签名不对就要调试很久&#xff0c;切记官方的 java-sdk 可能是有问题的总是签名失败&#xff0c;当然也许是我们的后端使用方式不对 import { useState } from "react";const usePay (success: …

精酿啤酒:酿造工艺的自动化与智能化发展

随着科技的不断进步&#xff0c;自动化与智能化已成为啤酒酿造工艺的重要发展方向。Fendi Club啤酒紧跟时代潮流&#xff0c;积极推动酿造工艺的自动化与智能化发展&#xff0c;旨在提高生产效率、确保产品品质和满足市场需求。 Fendi Club啤酒引入自动化生产设备。他们采用自动…

如何解决IntelliJ IDEA 2024打开项目时频繁闪退问题

&#x1f42f; 如何解决IntelliJ IDEA 2024打开项目时频繁闪退问题 &#x1f43e; 文章目录 &#x1f42f; 如何解决IntelliJ IDEA 2024打开项目时频繁闪退问题 &#x1f43e;摘要引言正文&#x1f4d8; 识别问题&#x1f4d9; 内存配置调整步骤1: 定位vmoptions文件步骤2: 修改…

Springboot3集成Web、RedisTemplate、Test和knife4j

本例将展示&#xff0c;如何在Springboot3中完成&#xff1a; Redis功能的Web接口实现构建Redis功能的单元测试knife4j自动化生成文档 Redis功能 Pom.xml <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter…

麦肯锡量子年报:技术日趋成熟,企业稳健前行;未来十年,市场价值约2万亿美元

引言&#xff1a;作为闻名遐迩的全球管理咨询公司&#xff0c;麦肯锡帮助私营、公共和社会部门等创造重要的组织变革。 关于量子计算&#xff0c;麦肯锡表示&#xff0c;它们将提供战略建议、确定量子应用的价值洼地&#xff0c;并为用例开发和伙伴关系创建战略路线图。 迄今为…