表单属性

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/hu_Time/article/details/100934992

今天熟悉了一下如何美化表单的一些元素，以及清楚默认的表单属元素样式，记录一下

美化表单元素

常见用法

1.重置表单元素样式

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

1、focus聚焦样式

input:focus{
//对轮廓进行偏移
outline-offset:0;
}

元素聚焦时的样式

2、checked
单选或多选框被选中的样式
html:

css:

input:checked+label{
  color:red;
}

设置textarea是否允许调整尺寸

css属性resize:

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

-none：不能调整尺寸

-horizontal:水平方向调整尺寸

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

文本框边缘到内容的距离

方式1：

input{
    padding
}

方式2：

input{
    //首行缩进
    text-indent:1rem;
}

清除表单全部数据

document.getElementById("dlform").reset();