css修改select选择框option被选中的背景颜色_这五个有用的 CSS 属性完全被我忽视了...
作者 | Desiré译者 | 苏本如,责编 | 郭芮头图 | CSDN 下载自视觉中国出品 | CSDN(ID:CSDNnews)
以下为译文:
各位网友,大家好!?今天,我想在这里和大家分享一些我很晚时候才知道的一些CSS属性,在此之前,没有人告诉我这些属性的存在。也许你们和我不一样,已经了解了这些属性。闲话少说,让我们进入正题吧:?
禁用用户选中一个元素(element)的文本使用属性user-select,并且将它的值设置为none,我们可以将一个元素的文本设置为不能被用户选中。
element { -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10+ and Edge */ user-select: none; /* Standard syntax */}
当你不想一个元素的原始内容被复制时,可以使用这个属性。
更改选中文本的背景颜色使用选择器::selection,可以更改选中文本的背景颜色:
::selection { color: #ececec; background: #222831;}
当你使用这个属性时,注意使用良好的颜色对比度组合。
在不使用br的情况下将文本换行使用属性white-space,并将它的值设置为pre-wrap或pre-line:
element { white-space: pre-wrap; /*pre-wrap*/ white-space: pre-line; /*pre-line*/}
设置字与字之间的间距这对你来说可能有点简单。但是直到我搜索这个需求时,我才知道有这个设置。你可以使用word-spacing这个属性来设置文本中词与词之间的间隔。
element { word-spacing: 6px; /* word spacing wow such */}
在浏览器中隐藏难看的滚动条我以前甚至不知道这是可以做到的。要实现这个目的,你必须为不同的浏览器,准备不同的代码:
/* Hide scrollbar for Chrome, Safari, and Opera */html::-webkit-scrollbar { display: none;}/* Hide scrollbar for IE and Edge */html { -ms-overflow-style: none;}
如果你禁用了滚动条,那么你需要确保提供上/下按钮和其他方便的导航选项。请注意,Firefox停止了对滚动条隐藏问题的支持,以上代码似乎是一个技巧,可以执行与我包含的其他代码相同的功能。原文:https://dev.to/helleworld_/5-css-useful-properties-i-ignored-2930本文为 CSDN 翻译,转载请注明来源出处。
更多精彩推荐
☞我们想研发一个机器学习框架,6 个月后失败了
☞生产型机器学习已经没那么困难了?
☞视频 | 你不知道的"开源"60年秘史
☞GitHub标星10,000+,Apache项目ShardingSphere的开源之路
☞阿里技术专家告诉你,如何画出优秀的架构图?
☞加拿大API平台如何做到30%为中国明星项目?创业老兵这样说……
你点的每个“在看”,我都认真当成了喜欢
css修改select选择框option被选中的背景颜色_这五个有用的 CSS 属性完全被我忽视了...相关推荐
- css修改select选择框option被选中的背景颜色_这 16 个 CSS 伪类,助你提升布局效率!
作者:Chidume Nnamdi 译者:前端小智 来源:mediuum 大家都说简历没项目写,我就帮大家找了一个项目,还附赠[搭建教程]. css 伪类是用于向某些选择器添加特殊的效果,是动态的,指 ...
- css修改select选择框option被选中的背景颜色_5个容易忽视的 CSS 属性
作者 | Desiré译者 | 苏本如,责编 | 郭芮出品 | CSDN(ID:CSDNnews) 以下为译文: 各位网友,大家好!?今天,我想在这里和大家分享一些我很晚时候才知道的一些CSS属性,在 ...
- 纯CSS调整select选择框高度,兼容IE/Firefox/Opera/Safair/Chrome
在IE下直接用height.border定义select没有效果,目前大部分情况都是用js进行模拟,其实css也是可以做得到的,原理很简单,隐藏select选择框的原生边框,再用其他元素模拟内边距及边 ...
- 修改 input checkbox(复选框) 选中的背景颜色 _@jie
在项目中遇到 修改 input选中后的背景颜色 实现效果如下图: 代码如下: 通过 after 伪类选择器 实现 <style>input[type=checkbox] {cursor: ...
- 使用css修改checkbox选择框的样式
二. 修改思路: 给原本的checkbox框加上visibility: hidden;属性,使其隐藏同时又占据原本在页面上面的位置,说直白点就是,使checkbox看不见,但是仍然占有原来的位置. 然 ...
- select选择框实现跳转
select选择框实现跳转 零.启示 1.启示把bom里面的几个对象稍微有点印象,那么主干有了,学其它的就感觉添置加瓦,很简单 就是关注树木的主干 2.万能的百度,不过当然要你基础好学得多才能看得懂, ...
- 解决小米2s手机 select选择框问题
解决小米2s手机 select选择框文本内容不能改变中学习到的 时间:2015-07-17 项目:甘肃银行-手机银行 问题记录:有一组选择框,第一个选择框选择存储类型(零存整取.整存整取.定活两便), ...
- AngularJs 基础教程 —— Select(选择框)
为什么80%的码农都做不了架构师?>>> 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:AngularJs 基础教程 -- Select(选择框) Angula ...
- Antd点击select选择框,页面滚动,选项跟着滚动
遇到问题如下: 做项目时,采用antd与react技术方案,需要实现选择一个select选择框,发现点击select选择框时,滚动页面,选项内容整体跟着页面滚动,而select选择框不动,如图: 解决 ...
最新文章
- 目标感太弱怎么办?如何做目标管理?
- 排序算法---插入排序(java版)
- Java黑皮书课后题第7章:**7.17(对学生排序)编写一个程序,提示用户输入学生个数、学生姓名和他们的成绩,然后按照学生成绩的降序打印学生的姓名。假定姓名是不包含空格的字符,使用next()读取
- 面向对象——案例练习(3)判断两个立方体是否相等
- 关于SQL Tuning的知识体系
- 计算机硬件的维护知识,电脑放了一年开不了机 电脑硬件维护常识要点有哪些...
- LeetCode2.两数相加
- ThinkPHP的介绍和安装
- Linux 性能测试与分析-转
- 转账引发数据一致性思考
- Smarty中文手册
- web前端期末大作业:美食文化网页设计与实现——美食餐厅三级(HTML+CSS+JavaScript)
- 方差,标准差,协方差,样本标准差,总体标准差,抽样平均误差
- PHP LOL接口,电竞数据API接口|英雄联盟lol|联赛统计|API调用示例代码
- 一元三次方程求解C/C++
- 安卓chrome插件开发!你有过迷茫吗?最全的BAT大厂面试题整理
- Linux网络服务——FTP服务器搭建
- app自动化(二)python代码操控手机终端
- 【狂神说:秦疆老师】Spring5笔记
- 通过ip查询域名信息
热门文章
- 矩阵乘法递推的优化艺术
- [luogu4027] [NOI2007]货币兑换
- 关于IOCP乱序的探讨
- Linux网络编程 | Socket编程(一):Socket的介绍、UDPSocket的封装、UDP服务器/客户端的实现
- Java 14 发布了,终于可以扔掉Lombok了?
- Java集合框架:TreeMap
- Python中的网络编程之TCP
- LiveVideoStack线上分享第四季(十):图像视频降噪的现在与未来——从经典方法到深度学习...
- 音视频技术开发周刊 76期
- 【Workshshop No.3 | Kyligence X 青云QingCloud Workshop】零基础搭建云上大数据平台