CSS（十五）——美化表单元素

最新推荐文章于 2024-05-28 09:33:56 发布

戒烟失败的老可爱

最新推荐文章于 2024-05-28 09:33:56 发布

阅读量1k

点赞数

分类专栏： CSS3 文章标签： css html html5 前端

本文链接：https://blog.csdn.net/qq_40749255/article/details/119916185

版权

CSS3 专栏收录该内容

20 篇文章 3 订阅

订阅专栏

CSS（十五）——美化表单元素

前言

本篇笔记记录表单元素的美化，书接**HTML（四）的知识，如果感觉有些只是比较模糊可以先去看看HTML（四）**的笔记。笔记链接在下面。

另：本篇笔记中并没有太多新知识，多数使用之前已经学到的知识。

HTML（四）：https://blog.csdn.net/qq_40749255/article/details/119888317?spm=1001.2014.3001.5501

知识点补充

伪类补充

focus

该属性表示元素聚焦时的样式。

元素聚焦表示光标点击某个元素，则称该元素正在聚焦

    <style>
        /*设定p元素下的input元素中字体颜色为灰色*/
        p>input{
            color:#999;
        }
        /*设定该input元素在聚焦状态下的边框样式*/
        p>input:focus{
            outline:#008c8c solid 1px;
            outline-offset: 0;
            color: black;
        }
    </style>
<p><input type="text"></p>

上述代码中的属性的含义如下：

outline：表示外边框，border其实是内边框，自己放大页面去试试；
outline-offset：表示外边框的位移值。

checked

该属性特质单选和多选框选中时候的样式。

    /*该样式表表示的是当单选框被选中之后，我们的样式表选中的是单选框的兄弟元素*/
	<style>
        input:checked+label{
            color: red;
        }
    </style>
    <p>
        <input id="man-radio" name = "gender" type="radio" name="" id="">
        <label for="man-radio">man</label>
    </p>
    <p>
        <input id="women-radio" name = "gender" type="radio" name="" id="">
        <label for="women-radio">women</label>
    </p>

单选框是属于可替换元素，所以我们并没有特别多的样式可以修改。

表单美化

表单美化之前需要先将表单中浏览器默认的样式复原。

表单元素中的样式比较复杂的是边框、聚焦等问题。可以使用一下方式来修改样式。

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

以上代码将被选中的表单元素的边框以及聚焦后的外边框、外边框位移取消。【注】：设置完成后会导致页面上有些元素没有显示，需要我们自己去设定相关元素的具体样式

表单的相关样式取消后，我们就可以按照UI图中给出的具体样式来制作静态页面，一般操作如下：

input[type="text"],textarea{
	border:1px solid #999;
}
input[type="text"]:focus,textarea{
	border:none;
	outline:1px solid red;
}
button{
	border:1px solid red;
	/*设置圆角边框*/
	border-radius:10px;
}

以上设定了元素的正常显示的属性以及聚焦以后的属性

表单美化的基本属性

接下来可以尝试用表单中的一些基本属性尝试个表单一些样式

设置多行文本框是否可以调整尺寸。

textarea{
	resize: ;
}

该属性一共有四个值，具体含义如下：

both：默认值两个方向都可以调整尺寸；
none：不能调整尺寸；
horizontal：水平方向可以调整尺寸；
vertical：垂直方向可以调整尺寸。

文本框边缘到内容的距离：

input{
	padding-left：
}

我们可以通过设置padding填充区来修改内部样式

单选框和多选框的样式修改

单选框与多选框属于可替换元素，我们无法修改他们的一些样式，所以我们选择不用它们——我们自己做

话不多说，上代码：

<style>
        .radio-item>.radio{
            width: 12px;
            height: 12px;
            border: 1px solid #999;
            border-radius: 50%;
            cursor: pointer;
            /*行盒不能设置宽高，块盒必须独占一行，所以设定为行块盒*/
            display: inline-block;
        }

        .radio-item>input:checked+.radio::after{
            content:"";
            display: block;
            width:5px;
            height: 5px;
            background-color: #008c8c;
            margin-left: 3.5px;
            margin-top: 3.5px;
            border-radius: 50%;
            
        }
        .radio-item>input:checked+.radio{
            border-color: #008c8c;
        }
        .radio-item>input:checked~span{
            color: #008c8c;
        }
        .radio-item>input[type="radio"]{
            display: none;
        }
</style>

请选择性别：
    <label class="radio-item">
        <input name="gender" type="radio">
        <span class="radio"></span>
        <span>man</span>
    </label>

    <label class="radio-item">
        <input name="gender" type="radio">
        <span class="radio"></span>
        <span>women</span>
    </label>