怎么去掉button的默认样式

作者:落知秋 | 创建时间: 2023-05-18
button在不添加任何样式的时候,默认都会自带样式,一般自带的样式都不符合实际的设计需要,大部分的时候,需要先去除默认的样式,重新给button元素加上合适的样式。下面就来介绍下如何去除默认的样式...
怎么去掉button的默认样式

操作方法

先看下默认样式效果,如图可以看到,默认padding和border,字体大小也是受浏览器默认指定

去除padding,指定一个字体大小,这里匹配了*表示所有元素,因为大部分的默认margin和padding都需要先去除,统一去除,后面需要再单独有针对性的添加 *{ margin: 0; padding: 0; font-size: 100%; }

默认padding去除之后,按钮之间有间隙,这是inline-block默认的间距,用float来去除,并指定合适的宽和高 button{ float: left; width: 60px; height: 60px; }

间距去掉了,但都显示成一行了,这个是因为添加的浮动影响的,可以在div元素后面去除浮动 div:after{ content: ""; display: block; clear: both; }

此时,可以看到边框重叠导致边框宽度不一致,需要自定义边框 border: 1px solid black; margin-right: -1px; margin-bottom: -1px;

从上面的图中,可以看到,在鼠标点击按钮的时候,会有蓝框选择的样式 加上outline: none;来去除

温馨提示

除了有默认样式,
点击展开全文

更多推荐