<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body>
<input type="text">
</body>
</html>
原始状态下,鼠标放入输入库框,会有对应的框边:
放入前:
放入后:
增加outline:none后的样式:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
input {
outline: none;
}
</style>
</head>
<body>
<input type="text">
</body>
</html>
放入前:
放入后:
还可以额外给input添加些样式:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
input {
outline: none;
border: 1px solid #ccc;
width: 150px;
height: 25px;
background: url(images/s.png) no-repeat 130px center;
}
</style>
</head>
<body>
<div>
<input type="text">
</div>
</body>
</html>
resize:
none:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style type="text/css">
textarea {
outline: none;
resize: none;
}
</style>
</head>
<body>
<div>
<textarea cols="10" rows="30"></textarea>
</div>
</body>
</html>