css修改select选择框option被选中的背景颜⾊_web前端⼊门到
实战：前端⾼⼿在。。。
这篇⽂章会记录我们平时常⽤到的 CSS ⽚段，使⽤这些 CSS 可以帮助我们解决许多实际项⽬问题中遇到的，墙裂建议点赞收藏再看，⽅便⽇后查
清除浮动
浮动给我们的代码带来的⿇烦，想必不需要多说，我们会⽤很多⽅式来避免这种⿇烦，其中我觉得最⽅便也是兼容性最好的⼀种是，在同级⽬录下再创建⼀个<div></div>；不过这样会增加很多⽆⽤的代码。此时我们⽤:after这个伪元素来解决浮动的问题，如果当前层级有浮动元素，那么在其⽗级添加上 clearfix 类即可。
// 清除浮动
.clearfix:after {
content: "00A0";
display: block;
visibility: hidden;
width: 0;
height: 0;
clear: both;
font-size: 0;
line-height: 0;
overflow: hidden;
}
.clearfix {
zoom: 1;
}
垂直⽔平居中
在 css 的世界⾥⽔平居中⽐垂直居中来的简单⼀些，经过了多年的演化，依然没有好的⽅式来让元素
垂直居中(各种⽅式各有优缺点，但都不能达到兼容性好，破坏⼒⼩的⽬标)，以下是⼏种常见的实现⽅式
绝对定位⽅式且已知宽⾼
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -7em;
width: 14em;
height: 6em;
绝对定位 ＋ 未知宽⾼ ＋ translate
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
//需要补充浏览器前缀
flex 轻松搞定⽔平垂直居中(未知宽⾼)
display: flex;
align-items: center;
justify-content: center;
⽂本末尾添加省略号
当⽂本的内容超出容器的宽度的时候，我们希望在其默认添加省略号以达到提⽰⽤户内容省略显⽰的效果。
宽度固定，适合单⾏显⽰...
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
宽度不固定，适合多⾏以及移动端显⽰
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
制造⽂本的模糊效果
当我们希望给⽂本制造⼀种模糊效果感觉的时候，可以这样做
color: transparent;
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
动画实现简洁 loading 效果
我们来实现⼀个⾮常简洁的 loading 效果
.loading:after {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
content: "2026";
-webkit-animation: ellipsis 2s infinite;
}
/
/ 动画部分
@-webkit-keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}
⾃定义⽂本选中样式
默认情况下，我们在⽹页上选中⽂字的时候，会给选中的部分⼀个深蓝⾊背景颜⾊(可以⾃⼰拿起⿏标试试)，如果我们想⾃⼰定制被选中的部分的样式呢？
// 注意只能修改这两个属性字体颜⾊选中背景颜⾊
element::selection {
color: green;
background-color: pink;
}
element::-moz-selection {
color: green;
background-color: pink;
}
顶⾓贴纸效果
有时候我们会有这样的需求，在⼀个列表展⽰页⾯，有⼀些列表项是新添加的、或者热度⽐较⾼的，就会要求在其上⾯添加⼀个贴纸效果的⼩条就像 hexo 默认博客的 fork me on github 那个效果⼀样。
接下来我们开始⼀步步完成最左边的这个效果
html
<div class="wrap">
<div class="ribbon">
<a href="#">Fork me on GitHub</a>
</div>
</div>
css
/* 外层容器⼏本设置  */
.wrap {
width: 160px;
height: 160px;
overflow: hidden;
position: relative;
background-color: #f3f3f3;
}
.ribbon {
background-color: #a00;
overflow: hidden;
white-space: nowrap;
position: absolute;
/* shadom */
-
webkit-box-shadow: 0 0 10px #888;
-moz-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
/* rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* position */
left: -50px;
top: 40px;
}
.ribbon a {
border: 1px solid #faa;
color: #fff;
display: block;
font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 1px 0;
padding: 10px 50px;
text-align: center;
text-decoration: none;
/
* shadow */
text-shadow: 0 0 5px #444;
}
input 占位符
当我们给部分 input 类型的设置 placeholder 属性的时候，有的时候需要修改其默认的样式。
input::-webkit-input-placeholder {
color: green;
background-color: #f9f7f7;
font-size: 14px;
}
input::-moz-input-placeholder {
color: green;
background-color: #f9f7f7;
font-size: 14px;
}
input::-ms-input-placeholder {
color: green;
background-color: #f9f7f7;
font-size: 14px;
}
移动端可点击元素去处默认边框
在移动端浏览器上，当你点击⼀个链接或者通过 Javascript 定义的可点击元素的时候，会出现蓝⾊边框，说实话，这是很恶⼼的，怎么去掉呢?
box sizing-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
⾸字下沉
要实现类似 word 中⾸字下沉的效果可以使⽤以下代码
element:first-letter {
float: left;
color: green;
font-size: 30px;
}
⼩三⾓
在很多地⽅我们可以⽤得上⼩三⾓，接下来我们画⼀下四个⽅向的三⾓形
.triangle {
/
* 基础样式 */
border: solid 10px transparent;
}
/*下*/
.triangle.bottom {
border-top-color: green;
}
/*上*/
.p {
border-bottom-color: green;
}
/
*左*/
.p {
border-right-color: green;
}
/*右*/
.p {
border-left-color: green;
}
可以看出画⼀个⼩三⾓⾮常简单，只要两⾏样式就可以搞定，对于⽅向只要想着画哪个⽅向则设置反⽅向的样式属性就可以
⿏标⼿型
⼀般情况下，我们希望在以下元素⾝上添加⿏标⼿型
a
submit
input[type="iamge"]
input[type="button"]
button
label
select

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。