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>
在上述代码中,我们设置了比较多的样式,具体解释如下:
- 首先对单选框做隐式关联,将源生单选框和自定义单选框都加入label中;
- 然后,设置单选框被选中的样式(在这里使用 + 来设置当单选框被选中后,样式表中选中他的兄弟元素来进行操作),也就是说在我们点击单选框后,改变兄弟元素的样式。
- 然后使用 ~ 来表示单选框被选中后,他的兄弟元素中所有的指定元素将被修改。
- 最后将单选框隐藏,这样就可以做一个美美哒单选框了(复选框同理,自己试试)
总结
本篇文章没什么好总结的,多了两个伪类选择器:focus和checked,然后是对表单美化的基本步骤,最后可以通过这些知识点来做一个美美哒单选框,就是这些。今天有事,写的有点少。