: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>
 

伪元素:placeholder-shown&&:focus-within的更多相关文章

  1. 伪元素 first-letter

    ::after, ::before, ::backdrop, ::first-letter,::first-line, ::selection(css3)是伪元素, :active, :focus,  ...

  2. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  3. 深入学习css伪类和伪元素及其用法

    前言 CSS的伪类和伪元素在平时的代码中经常会出现,可是一旦别人问你,什么是伪类,什么是伪元素,可能还是不能完整的表述出来,下面我们来一探究竟. 伪类和伪元素定义 伪类用于在页面中的元素处于某个状态时 ...

  4. css中伪类/伪元素详解

    一.伪类和伪元素 伪类和伪元素都是用来修饰不在文档树中的部分,区别在于, 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active). ...

  5. 妙味css3课程---1-2、css3中新增的伪类和伪元素有哪些

    妙味css3课程---1-2.css3中新增的伪类和伪元素有哪些 一.总结 一句话总结: 1.div:target{}是什么意思? 比如a标签的锚点链接到div,div:target{}就可以找到这个 ...

  6. CSS躬行记（2）——伪类和伪元素

    一.伪类选择器 伪选择器弥补了常规选择器的不足,能够实现一些特殊情况下的样式,例如在鼠标悬停时或只给字符串中的第一个字符指定样式.与类选择器类似,可以从HTML元素的class属性中查看到,但伪选择器 ...

  7. css伪选择器使用总结——css中关于伪类和伪元素的知识总汇

    CSS 伪类用于向某些选择器添加特殊的效果,而CSS引入伪类和伪元素的概念是为了实现基于文档树之外的信息的格式化.这里讲总结关于css伪类和伪元素的相关使用 伪元素 :before/:before 在 ...

  8. 前端知识之CSS(1)-css语法、css选择器（属性、伪类、伪元素、分组与嵌套）、css组合器

    目录 前端基础之css 1.关于css的介绍 2.css语法 3.三种编写CSS的方式 3.1.style内部直接编写css代码 3.2.link标签引入外部css文件 3.3.标签内直接书写 4.c ...

  9. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  10. CSS笔记之伪类与伪元素

    伪类分为两种:UI伪类 与 结构化伪类 UI伪类:a:link{}    a:hover{}   a:active{}  a:visited{} input[type='text']:focus{} ...

随机推荐

  1. Spark --idea无法new scala class

    问题: 无法新建Scala class 解决: 1.下载插件 setting-->Plugins-->安装scala插件-->提示重启idea-->自动提示你安装scala s ...

  2. python之路 IO多路复用 线程进程初步了解

    一.IO多路复用 1.客户端 #!/usr/bin/env python #-*-coding:utf-8-*- import socket sk=socket.socket() sk.connect ...

  3. Microsoft.VisualStudio.Web.PageInspector.Loader

    未能加载文件或程序集"Microsoft.VisualStudio.Web.PageInspector.Loader, Version=1.0.0.0, Culture=neutral, P ...

  4. vue切换路由模式{hash/history}

    vue中常用的路由模式 hash(#):默认路由模式 histroy(/)切换路由模式 切换路由模式 export default new Router({ // 路由模式:hash(默认),hist ...

  5. 并发-CountDownLatch、CyclicBarrier和Semaphore

    CountDownLatch.CyclicBarrier和Semaphore 参考: http://www.cnblogs.com/dolphin0520/p/3920397.html https:/ ...

  6. AtCoder Regular Contest 094

    AtCoder Regular Contest 094 C - Same Integers 题意: 给定\(a,b,c\)三个数,可以进行两个操作:1.把一个数+2:2.把任意两个数+1.求最少需要几 ...

  7. tp添加分页

    //分页开始 $count=M('article')->where($condition)->count(); $p = intval($p) > 0 ? $p : 1; $page ...

  8. poj2349 Arctic Network - 最小生成树

    2017-08-04 16:19:13 writer:pprp 题意如下: Description The Department of National Defence (DND) wishes to ...

  9. GridView右键菜单

    一.添加右键菜单 1.在VS工具箱中的“菜单和工具栏”找到ContextMenuStrip控件,双击添加. 2.点击ContextMenuStrip右上方的小三角形,打开编辑项,可以添加菜单项.至于菜 ...

  10. JAVA实现计算三角形等平面图形的夹角问题

    问题重现 现在一平面上有三点,分别是x(x1,x2),y(y1,y2),z(z1,z2),图形大致如下 现要求用java代码求出∠YxZ的度数. 问题分析及数学模型 1.要求两直线的夹角,就想到数学中 ...