Effect picture:
Directly on the code:
<!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>
input {
margin: 50px 0 0 100px;
width: 120px;
height: 40px;
border: 1px solid pink;
font-size: 20px;
text-align: center;
color: red;
/* 轮廓的宽度 */
outline-width: 4px;
/* 轮廓的颜色 */
outline-color: rosybrown;
/* 轮廓的样式 */
outline-style: dotted;
/* 轮廓的简写 */
/* outline: 8px ridge rgba(170, 50, 220, .6); */
}
input::placeholder {
color: blue;
font-size: 6px;
}
</style>
</head>
<body>
<input type="text" placeholder="请输入" />
</body>
</html>
It is worth noting that the outline does not occupy the box space