29、CSS进阶——美化表单元素

lvh98

已于 2022-08-04 14:16:19 修改

阅读量1.1k

点赞数

分类专栏： web前端学习笔记（HTML+CSS篇）文章标签： css html 前端

于 2022-08-04 14:15:58 首次发布

本文链接：https://blog.csdn.net/lvh98/article/details/126143901

版权

web前端学习笔记（HTML+CSS篇）专栏收录该内容

38 篇文章 1 订阅

订阅专栏

美化表单元素

文章目录

美化表单元素

1. 新的伪类

1.1 focus（聚焦样式）

:focus元素聚焦时的样式。

可以按TAB键切换聚焦的元素，切换顺序可以在元素属性中设置tabindex来编号。

<p>
    <a tabindex="2" href="https://www.baidu.com">lorem</a>
</p>

<p>
    <input tabindex="1" type="text">
</p>

<p>
    <button tabindex="3">提交</button>
</p>

input{
    color: #999;
}
:focus {
    outline: 2px solid #f40;
    outline-offset: 0;
    color: #000;
}

focus

当用foucs伪类选择器设置外边框（outline）时，边框样式设置为auto时，边框宽度设置无效。

outline-offset外边框偏移量。

1.2 checked（选中样式）

单选或多选框被选中的样式。

<input type="radio" name="gender" id="radmale">
<label for="radmale">男</label>
<input type="radio" name="gender" id="radfemale">
<label for="radfemale">女</label>

input:checked+label {
    color: #05f;
}

check

2. 常见用法

2.1 重置表单元素样式

input, textarea, button, select{
	border: none;
}
input:focus, textarea:focus, button:focus, select:focus{
	outline: none;
	outline-offset: 0;
}

文本框、多行文本框、按钮、下拉列表选择框去边框，去聚焦时的外边框，外边框偏移量置0。

重置表单元素样式后，就可以根据自己的需求重新设置表单样式，input[type="text"],textarea,select{}，input[type="text"]:focus,textarea:focus,select:focus{}等。

2.2 设置textarea是否允许调整尺寸(resize)

css属性resize：

both：默认值，两个方向都可以调整尺寸

<textarea></textarea>

或

<textarea style="resize:both;"></textarea>

resize_both

none：不能调整尺寸

<textarea style="resize:none;"></textarea>

resize_none

horizontal: 水平方向可以调整尺寸

<textarea style="resize:horizontal;"></textarea>

resize_horizontal

vertical：垂直方向可以调整尺寸

<textarea style="resize:vertical;"></textarea>

resize_vertical

2.3 文本框边缘到内容的距离(padding/text-indent)

方式1：padding设置内边距；

<input type="text" style="padding: 15px 10px;">

padding

方式2：text-indent首行文本缩进。

<input type="text" style="text-indent: 1em;">

text-indent

这两种方式不仅可以应用在input元素上，也可以应用到textarea元素。

2.4 控制单选和多选的样式(span/:checked)

radio单选框和checkbox多选框是无法改变样式的，因为他们是可替换元素，只能通过其他元素自行设计选择框样式。

在label元素中是不能加入div元素的，做选框样式的元素可以用span。

<p>
    请选择你的性别：
    <input type="radio" name="gender" id="male">
    <label for="male">
        <span class="myRadio"></span>
        <span class="text">男</span>
    </label>
    <input type="radio" name="gender" id="female">
    <label for="female">
        <span class="myRadio"></span>
        <span class="text">女</span>
    </label>
</p>

span{
    cursor: pointer;
}
.myRadio{
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #eee;
    border: solid 3px #5e5e5e;
    border-radius: 50%;
    position: relative;
    top: 2px;
}
input[type="radio"]:checked+label>.myRadio{
    border: solid 3px #05f;
    background-color: #fff;
}
input[type="radio"]:checked+label .text{
    color: #05f;
}
input[type="radio"]:checked+label>.myRadio::after{
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    background-color: #05f;
    border-radius: 50%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
input[type="radio"]{
    display: none;
}