更新时间:2021-09-07 来源:黑马程序员 浏览量:
<input>标签是文本输入框,默认带有外边框样式,下面我们聊聊input边框颜色怎么设置?
修改前的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input外边距</title>
<style>
* {
margin: 10px auto;
}
div {
width: 1000px;
}
</style>
</head>
<body>
<div>
<input type="text" value="请输入内容">
</div>
</body>
</html>
如何修改input外边距?
修改外边距颜色:outline-color: 颜色;
如何修改input外边距宽度?
修改外边距宽度为4像素:outline-width : 4px;
如何清除input外边默认样式?
清除外边距样式:outline-style: none;
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>input外边距</title>
<style>
* {
margin: 10px auto;
}
div {
width: 1000px;
}
/*清除input默认样式 */
input {
outline-style: none;
}
</style>
</head>
<body>
<div>
<input type="text" value="请输入内容">
</div>
</body>
</html>
清除后的效果
猜你喜欢: