伪元素:placeholder-shown:focus-within

:placeholder-shown

另外，划重点，这个伪类是仍处于实验室的方案。也就是未纳入标准，当然我们的目的是探寻有意思的 CSS 。

当 input 类型标签使用了 placeholder 属性有了默认占位的文字，会触发此伪类样式。

配合:not()伪类，可以再改变当默认文字消失后的样式，再配合本文的主角，我们可以实现表单的一系列效果。

CSS 代码大概呈现成这样：

.g-container {width: 500px;
height: 60px;input {
height: 100%;
width: 100%;&:not(:placeholder-shown) {
...
}&:placeholder-shown {...
}
}&:focus-within {...
}
}

源码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.g-container {position: relative;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
width: 500px;
height: 60px;
overflow: hidden;
transition: 0.3s;
}
.g-container > * {border: none;
outline: none;
}
.g-container .g_input_search {padding: 0 15px;
height: 100%;
width: 100%;
border: 1px solid #ddd;
font-size: 18px;
box-sizing: border-box;
}
/*.g-container .g_input_search:not(:placeholder-shown) {*/
/*border: 1px solid #03a9f4;*/
/*}*/
.g-container .g_input_search:not(:placeholder-shown) + .g_button_search {opacity: 1;
}
.g-container .g_input_search:placeholder-shown + .g_button_search {opacity: 0;
}
.g-container .g_input_search:not(:placeholder-shown){border: 10px solid #03a9f4;
font-size: 38px;
color: #03a9f4;
}
.g-container .g_button_search {background: #03a9f4;
color: #feffd4;
font-size: 15px;
cursor: pointer;
width: 100px;
height: calc(100% - 20px);
transition: 0.3s;
position: absolute;
right: 10px;
top: 10px;
}
.g-container:focus-within {-webkit-transform: translateY(-4px);
transform: translateY(-4px);
border-color: #bbb;
box-shadow: 4px 4px 10px 2px #ddd;
}
</style>
</head>
<body>
<div class="g-container">
<input type="text" placeholder="输入你想查询的内容" class="g_input_search" >
<button type="button" class="g_button_search">GO</button>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/bgwhite/p/9414295.html

伪元素:placeholder-shown:focus-within相关推荐

css 商城两列_如何使用css伪元素实现超实用的图标库（附源码）
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
java的string访问某个元素_CSS伪类与伪元素总是傻傻分不清，这份总结够面试用了
熟悉前端的人都会听过 css 的伪类与伪元素,然而大多数的人都会将这两者混淆.本文从解析伪类与伪元素的含义出发,区分这两者的区别,并且列出大部分伪类与伪元素的具体用法,即使你有用过伪类与伪元素,但里面 ...
css 商城两列_css大法之使用伪元素实现超实用的图标库（附源码
今天我们来复盘一下前端中css伪元素的知识以及如何用css伪元素来减轻javascript的压力,做出一些脑洞大开的图形. 预备知识伪元素伪元素是一个附加至选择器末的关键词,允许你对被选择元素的特 ...
css中伪类和伪元素有什么不一样
css中的伪类[:]和伪元素[::]都是我们日常开发过程中会用到的伪元素选择器,有时候我们用的是[:],有时候用的又是[::],有时候又好像两者都行,这到底是为什么呢?今天我们就来看看这两个东西到底有 ...
理解伪类选择器与伪元素选择器
1. 两个选择器的异同: 伪类选择器是用来向某些选择器来添加效果.不修改DOM内容,通过一些特定的选择器根据特定的状态.特定条件来修改元素的杨氏.比如:悬停(hover).点击(active)以及文档 ...
常用的一些 CSS 技巧二 — 选择器（伪类与伪元素）
你可以看看其他常用的 CSS 技巧: 常用的一些 CSS 技巧一常用的一些 CSS 技巧三 CSS 重置盒模型 *, *::before, *::after {box-sizing: border- ...
css3伪元素::_CSS荧光笔：使用:: selection伪选择器
css3伪元素:: Selecting content on a web page - whether by mouse, touch, gesture or stylus - always prec ...
伪类选择器与伪元素选择器的区别
Hello,小可爱们,今天我们一起来区分一下伪类选择器跟伪元素选择器吧! 伪类选择器与伪元素选择器在名字上很相似,所以对于初学者来说,很容易混淆它们,区别不开,其实两者在作用上还是有本质的区别的,只要 ...
【web】伪类伪元素
伪类伪元素伪类选择器可以理解为描述元素的某种状态常用伪类 a标签的4种伪类(要按顺序书写:link.visited.hover.active) :link:元素链接点击前的样式 :visited ...
CSS3伪类和伪元素的特性和区别
前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus,:hover以及<a>标签的:link.visited等,伪元素较常见的比如:before.:after等. 其 ...

伪元素:placeholder-shown:focus-within

伪元素:placeholder-shown:focus-within相关推荐

最新文章

热门文章