背景
话不多说,我们能否用纯css实现以下效果:
答案是肯定的。
借助css:placeholder-shown :valid :invalid伪类及html5 input pattern 属性就可以实现,:placeholder-shown伪类目前兼容性如下:
直接上代码!
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="input-fill-box">
<input class="input-fill" placeholder="邮箱" pattern="^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$" required>
<a href="javascript:&#