继承和表单元素

在一些浏览器中,表单元素默认不会继承字体样式,因此如果想要确保表单填入区域使用body中或者一个父元素中定义的字体,需要向CSS中加入这条规则。

button, 
input, 
select, 
textarea { 
  font-family : inherit; 
  font-size : 100%; 
} 

form元素与box-sizing

跨浏览器的form元素对于不同的挂件使用不同的盒子约束规则。为了保证统一,将所有元素的内外边距均设为0是个好主意,然后在单独进行样式化控制的时候将这些加回来。

button, 
input, 
select, 
textarea {  
  box-sizing: border-box; 
  padding: 0;
  margin: 0; 
}

除了上面提到的规则以外,也应该在<textarea>上设置overflow: auto 以避免IE在不需要滚动条的时候显示滚动条

textarea {
  overflow: auto;
}

把这一切都综合起来

作为最后一步,可以将上面讨论过的各式属性包起来,成为以下的“表单重置”,以提供一个统一的在其上继续进行工作的地基,这包含了前三节提到的所有东西:

button, 
input, 
select, 
textarea { 
  font-family: inherit; 
  font-size: 100%; 
  box-sizing: border-box; 
  padding: 0; margin: 0; 
} 

textarea { 
  overflow: auto; 
} 
Last modification:January 6th, 2021 at 05:55 pm
如果觉得我的文章对你有用,请随意赞赏