Open mishe opened 6 years ago
input,textarea { color: rgb(60, 0, 248); /* 光标的颜色*/ text-shadow: 0px 0px 0px #D60B0B; /* 文本颜色 */ -webkit-text-fill-color: transparent; } input::-webkit-input-placeholder{ color: rgb(60, 0, 248); text-shadow: none; -webkit-text-fill-color: initial; }
input,textarea{ caret-color: red; }
新办法是简单了,但有兼容问题
<div data-msg="Open this file in Github Desktop"> hover </div> div{ width:100px; border:1px solid red; position:relative; } div:hover:after{ content:attr(data-msg); position:absolute; font-size: 12px; width:200%; line-height:30px; text-align:center; left:0; top:25px; border:1px solid green; }
<ul> <li> <div class="hd"> 列表1 </div> <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div> </li> <li> <div class="hd"> 列表1 </div> <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div> </li> <li> <div class="hd"> 列表1 </div> <div class="bd">列表内容<br>内容列表内容<br>内容列表内容<br>内容</div> </li> </ul> .bd { max-height:0; overflow:hidden; transition: all 1s ease-out; } li:hover .bd { max-height: 600px; transition-timing-function: ease-in; }
<p class="center">我是两端对齐文字端对齐文字</p> .center{ text-align:justify; } .center:after{ content:'';width:100%;display:inline-block; }
<p class="center">我是两端对齐文字端对齐文字</p> .center{ text-align:justify; text-align-last:justify; }
但是 text-align-last 的兼容性不太好
手动点赞,涨姿势 😉
改变 input textarea 焦点光标的颜色
老办法:
新办法
新办法是简单了,但有兼容问题
利用 CSS 的 content 属性 attr 抓取资料
实现鼠标悬浮内容自动撑开的过渡动画
文本两端对齐
老办法
新办法
但是 text-align-last 的兼容性不太好