标签：checked color focus 表单 item html radio input css
美化表单元素
文章目录
新的伪类
- focus 元素聚焦样式
<!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:focus{
outline: 3px solid #008c8c;
outline-offset: none;
color: red;
}
input{
color: blue;
}
</style>
</head>
<body>
<p>
<a tabindex="2" href="http://www.baidu.com">lorem</a>
</p>
<p>
<input type="text" tabindex="1">
</p>
<p>
<button tabindex="3">提交</button>
</p>
</body>
</html>
- checked
单选或多选选中的样式
<!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:checked+label{
/* 选中的单选框的下一个兄弟元素 label元素 */
color: red;
}
</style>
</head>
<body>
<p>
<input id="radmale" name="gender" type="radio">
<label for="radmale">男</label>
<input id="radfemale" name="gender" type="radio">
<label for="radfemale">女</label>
</p>
</body>
</html>
常见用法
- 重置表单元素样式
input,textarea,button,select{
border: none;
}
input:focus,
textarea:focus,
button:focus,
select:focus{
outline: none;
outline-offset: 0;
}
-
设置textarea是否允许调整尺寸
resize :both(两边都可调) none …
horizontal 水平方向
vertical 垂直方向 -
文本框边缘到文字距离
<!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>
/* 方式一 padding */
input{
padding-left: 10px;
}
/* 方式二 text-indent 不能设置两边 */
textarea{
text-indent: 1em;
}
</style>
</head>
<body>
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>
- 控制单选，多选的样式
制作好看的单选框(important)
<!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>
.radio-item .radio{
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid #999;
border-radius: 50%;
cursor: pointer;
}
.radio-item input:checked+.radio{
border-color: #008c8c;
}
.radio-item input:checked~span{
color: #008c8c;
}
.radio-item input:checked+.radio::after{
content: "";
display: block;
width: 5px;
height: 5px;
background-color: #008c8c;
margin-top: 3.5px;
margin-left: 3.5px;
border-radius: 50%;
}
.radio-item input[type="radio"]{
display: none;
/* 隐藏最初单选框 */
}
</style>
</head>
<body>
<p>
选择:
<label class="radio-item">
<input type="radio" name="gender">
<span class="radio"></span>
<span>男</span>
</label>
<label class="radio-item">
<input type="radio" name="gender">
<span class="radio"></span>
<span>女</span>
</label>
</p>
</body>
</html>
标签：checked,color,focus,表单,item,html,radio,input,css 来源： https://blog.csdn.net/coising/article/details/122640912
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。