我正在做一个网页,我想要定制的<button>个标签.所以对于CSS,我说:border: none.现在它在safari中运行得很好,但在chrome中,当我点击其中一个按钮时,它会在周围放置一个恼人的蓝色边框.我以为button:active { outline: none }button:focus { outline:none }行得通,但两者都不行.有什么 idea 吗?

这是它在被点击之前的样子(以及我希望它在被点击后仍然是什么样子):

这就是我所说的边界:

在此处输入图像描述

以下是我的CSS:

button.launch {
    background-color: #F9A300;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.launch:hover {
    cursor: pointer;
    background-color: #FABD44;
}

button.change {
    background-color: #F88F00;
    border: none;
    height: 40px;
    padding: 5px 15px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 300;
    margin-top: 10px;
    margin-right: 10px;
}

button.change:hover {
    cursor: pointer;
    background-color: #F89900;
}

button:active {
    outline: none;
    border: none;
}

推荐答案

这样做是not recommended,因为它会倒退您站点的前accessibility位;有关更多信息,请参阅此post.

也就是说,如果您坚持的话,这个CSS应该可以工作:

button:focus {outline:0;}

请判断它或JSFdle:http://jsfiddle.net/u4pXu/

或者在这个片段中:

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.launch {
background-color: #F9A300;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.launch:hover {
cursor: pointer;
background-color: #FABD44;
}

button.change {
background-color: #F88F00;
border: none;
height: 40px;
padding: 5px 15px;
color: #ffffff;
font-size: 16px;
font-weight: 300;
margin-top: 10px;
margin-right: 10px;
}

button.change:hover {
cursor: pointer;
background-color: #F89900;
}

button:active {
outline: none;
border: none;
}

button:focus {outline:0;}
<button class="launch">Launch with these ads</button> 
<button class="change">Change</button>

Css相关问答推荐

基于子元素的子元素数量的样式元素

日期面板未与Angular中的日期控件对齐

如何使用TailwindCSS溢出?

Prettier/VS Code 在 CSS 中的 !important 之前添加一个空格,导致它在 WordPress 中崩溃

如何取消 CSS 伪类中的属性设置?

CSS关键帧中使用transform-origin存在问题的解决方案

当前的 html 标签没有发生两列布局

如何简化CSS?

没有 colored颜色 Select 器的 JavaFX colored颜色 Select 器

带填充的水平边框

CSS背景位置从顶部的给定像素开始?

reactjs - 容器中水平行的png图像

CSS 中的区域类似于 C# 区域?

使用 JavaScript 将 CSS 添加到 ?

如何动态生成用逗号分隔的类列表?

Select 器.class.class和.class.class有什么区别?

从样式设置为 % 的元素获取宽度(以像素为单位)?

@font-face src: local - 如果用户已经拥有本地字体,如何使用它?

在 CSS 中使用多个 @font-face 规则

使用没有设置宽度或高度的边界半径的胶囊形状?