假如你知道原因， input::placeholder { color: green;} 我留意到有一些其他的属性， input:placeholder-shown。

但这实际上不起浸染 之所以显示粉赤色，可是假如我们的输入元素没有占位符会产生什么呢? 这里有个取巧的要领：传入一个空字符串 ， 简朴来说就是当输入框的placeholder内容显示的时候，如下所示： // htmlinput placeholder=placeholder text /textarea placeholder=placeholder text/textarea// css input:placeholder-shown， textarea:placeholder-shown{ border:1px solid pink;} 假如 placeholder 为空 placeholder-show 就没结果了： // htmlinput placeholder= /textarea placeholder= text/textarea :placeholder-shown vs ::placeholder 我们可以利用:placeholder-shown配置input元素的样式，也会影响placeholder的样式，接待留言汇报我一下， 雷同于类选择器（即.form-input）比范例选择器（即input）具有更高的权重，较量官方的表明是 CSS伪类暗示任何显示占位符文本的form元素，必需利用伪元素::placeholder， （进修视频分享： css视频教程 ） 一般我们常见placeholder伪类选择器用来修改默认样式及文案， :placeholder-shown vs :empty :placeholder-shown是专门用于确定元素是否显示占位符的工具。

//htmlinput placeholder=placeholder value=not empty /// cssinput:not(:placeholder-shown) { border: 1px solid green;}实战 用placeholder-shown我们可以实现下面动效 详细代码如下: Html div class=inputinput class=input-fill placeholder=邮箱label class=input-label邮箱/label/div Css .input{ position: relative; }.input-fill{ border: 1px solid #ececec; outline: none; padding: 13px 16px 13px; font-size: 16px; line-height: 1.5; width: fit-content; border-radius: 5px;}.input-fill:placeholder-shown::placeholder { color: transparent;}.input-label { position: absolute; font-size: 16px; line-height: 1.5; left: 16px; top: 14px; color: #a2a9b6; padding: 0 2px; transform-origin: 0 0; pointer-events: none; transition: all .25s;}.input-fill:focus{ border: 1px solid #2486ff;}.input-fill:not(:placeholder-shown) ~ .input-label。

简朴的说就是 placeholder 有值才生效。

更多请存眷红联其它相关文章！ ， textarea:placeholder-shown{ font-style: italic; text-transform: uppercase; letter-spacing: 5px;} 我也不知道这是啥环境，对付实际的占位符文本，我们可以在输入不是空的环境下举办定位，这是因为:placeholder-shown仅会针对input自己，是因为伪类增加了 css 的权重， // htmlinput placeholder= !-- pass empty string --//cssinput:placeholder-shown { border-color: pink;} 组合其它选择器 我们可以利用:not伪类对某些事物举办逆运算。

// htmlinput value=not emptyinput!-- empty --// cssinput:empty { border: 1px solid pink;}input { border: 1px solid black;} 这里看似empty起浸染了，假如应用::placeholder-shown， 高权限选择器将始终包围低权重配置的样式，请会见： IT之家入门 ！！ 以上就是详解CSS中的:placeholder-shown伪类的具体内容， 假如查抄 input 内容是否为空（在没有点位符的环境下）？ 我们查抄输入是否为空的独一要领是利用:placeholder-shown， input:placeholder-shown { border: 1px solid pink; background: yellow; color: green;} 留意一些奇怪的问题-我们配置 color: green，感谢，在移动端没什么问题 placeholder-show是如何事情的？ :placeholder-shown CSS 伪类 在 input 或 textarea 元素显示 placeholder text 时生效。

我们主要利用它来查抄input 内容是否为空（假设所有的input都有一个占位符）， -32px); background-color: #fff; color: #2486ff;} 原文地点：https://www.samanthaming.com/tidbits/88-css-placeholder-shown/ 作者：Samantha Ming 更多IT之家相关常识，.input-fill:focus ~ .input-label { transform: scale(0.75) translate(0，因为我们看到的是粉赤色边框， 在这里，突然发明placeholder-shown伪类选择器。

兼容性如下。

但没有浸染用， 所以我们可以这样说：不要利用:empty查抄输入元素是否为空， 这里你大概会想，也许是因为这些属性被placeholder担任了，输入框干嘛干嘛，利用 empty 也是可以的吧？我们来看看，。