1. 首页
  2. css

CSS替代默认按钮样式

HTML中有各种各样的\”按钮\”。你有:
Button
Plus, for better or worse, people like having links that are styled to match the look of other true buttons on the site

One challenge is getting all those elements to look and layout exactly the same. We\”ll cover that a few ways.Another challenge is getting people to use them correctly
This is a bit surprising to me — but I hear it often enough to worry about it — is that more and more developers are using 个按钮。就像在中一样,他们只需要找到任何通用的、无样式的HTML就行了,并根据需要构建它。Andy Bell解释了为什么真正的按钮更好:
那么,元素对风格来说是个麻烦,对吧?这并不意味着你应该将你的JavaScript事件附加到或 though. You see, when you use a ,你可以免费获得键盘事件。您还可以帮助屏幕阅读器用户退出,因为它将正确地宣布元素。
。纽扣很奇怪!它们有大量的默认样式(来自\”用户代理样式表\”),在不同的浏览器中有所不同,这意味着您需要做一些工作才能使它们完全符合您的要求。
看到所有的奇怪之处了吗?
– 没有任何样式,按钮有点小,而且有本地边框/边框半径/方框阴影的东西。
– 仅仅通过设置字体大小,我们就失去了所有的默认设置,但是它有了一个新的默认外观,一个有边框和正方形的角,一个渐变背景,没有方框阴影。这本质上是-webkit-appearance: button;。
– 按钮有自己的字体系列,所以除非你告诉它,否则不要从层叠继承。
这里是Chrome的按钮用户代理样式表:
Firefox的行为有些不同。在上面的视频中看到了设置border: 0;是如何删除Chrome中的边框,以及背景的吗?在Firefox中不是这样的:
我指出这一点只是想说,我明白了,在浏览器中按钮真的很奇怪。考虑到其他十几种浏览器、移动设备,以及我们希望所有这些不同元素的样式看起来完全相同的想法(见文章开头),我对希望避免这种情况的人有一点同情心。咨询Normalize从来没有坏处
Normalize做了大量工作:
/** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */button,input,optgroup,select,textarea {font-family: inherit; /* 1 */font-size: 100%; /* 1 */line-height: 1.15; /* 1 */margin: 0; /* 2 */}/** * Show the overflow in IE. * 1. Show the overflow in Edge. */button,input { /* 1 */overflow: visible;}/** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */button,select { /* 1 */text-transform: none;}/** * Correct the inability to style clickable types in iOS and Safari. */button,[type=\”button\”],[type=>
I was a tiny bit surprised to see WTF, Forms? not cover buttons, only because of how much weirdness there is. But the form elements that project whips into shape are even more notoriously difficult! A Style-Testing Kinda Thingy
I feel like the answer to this is basically a big ol\” block of CSS. That\”s what Andy provided, and you could very likely come to one on your own by just being a little heavier handed than the usual of setting style rules with your buttons.
Still, I felt compelled to make a little tester machine thingy so you can toggle styles on and off and see how they all go together in whatever browser you happen to be in:A11y
The biggest point here is to use the correct native elements, as you get a bunch of functionality and accessibility for free. But you might as well get the styling right, too!
While we\”re talking buttons, I\”m gonna use the same quote I used in our When To Use The Button Element post from MDN:
Warning: Be careful when marking up links with the button role. Buttons are expected to be triggered using the Space key, while links are expected to be triggered through the Enter key. In other words, when links are used to behave like buttons, adding> alone is not sufficient. It will also be necessary to add a key event handler that listens for the Space key in order to be consistent with native buttons.
You don\”t need> on 因为他们已经是按钮了,但是如果你要做任何其他元素的按钮,你要做更多的工作来模仿功能。
另外,不要忘记:hover和:focus样式!一旦你为默认状态的样式争论不休,这应该不是那么难,但你肯定需要它们!
button:hover,button:focus {background: #0053ba;}button:focus {outline: 1px solid #fff;outline-offset: -4px;}button:active {transform: scale(0.99);}

CSS替代默认按钮样式 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%9b%bf%e4%bb%a3%e9%bb%98%e8%ae%a4%e6%8c%89%e9%92%ae%e6%a0%b7%e5%bc%8f/