html的⽂本框、按钮美化
input框和按钮美化
有时候⼀些后端⼈员，想写⼀个简单的表单验证的时候，前端美化问题是⼀个⾮常头疼的问题，我们直接⽤html的input标签和按钮会⾮常丑，这时候我们可以选择引⼊⼀些前端框架，例如：jQuery，layui等等，但是如果我们只是想做⼀个简单⼜好看的的表单验证，引⽤这些框架反⽽⼤材⼩⽤了，⽽且浪费内存，这时候⼩编就来给⼤家分享⼀个设置input属性⾮常实⽤的属性，不⽤引⼊框架也能设置出很好看的⼀些input框，按钮等组件，下⾯是效果图
input框美化
input框美化之后获得焦点之前:
input框美化之后获得焦点之后:
实现代码
主要通过设置input获得焦点之后的outline属性，来实现input框美化效果，下⾯是实现的 代码.
<!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>input框美化</title>
<style>
.inputText{
width: 500px;
height: 50px;
line-height: 30px;
font-size: 30px;
padding-left: 30px;
border-radius: 50px;
background-color: gainsboro;
border: none;
}
.inputText:focus{
outline: none;//设置所有的轮廓属性为none
background-color: lightblue;
}
</style>
</head>
<body>html内容文本框
<input type="text"class="inputText">
</body>
</html>
按钮美化
按钮效果图
<!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>按钮框美化</title>
<style>
.btn{
width: 150px;
height: 50px;
border: none;
background-color: green;
line-height: 50px;
font-size: 30px;
text-align: center;
color: white;
border-radius: 50px;
}
.btn:focus{
outline: none;
}
.btn-primary{
background-color: blue;
}
.btn-success{
background-color: green;
}
.btn-warning{
background-color: yellow;
}
.btn-danger{
background-color: red;
}
</style>
</head>
<body>
<input type="button"value="按钮"class="btn btn-primary">
<input type="button"value="按钮"class="btn btn-success">
<input type="button"value="按钮"class="btn btn-warning">
<input type="button"value="按钮"class="btn btn-danger">
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。