相关疑难解决方法(0)

我正在开发一个网页,我想要自定义样式的<button>标签.所以用CSS,我说:border: none.现在它在safari中完美运行,但在chrome中,当我点击其中一个按钮时,它会在它周围放置一个恼人的蓝色边框.我想button:active { outline: none }或者button:focus { outline:none }会工作,但两者都没有.有任何想法吗？

这是它在被点击之前的样子(以及我希望它在被点击之后仍然看起来如何):

这就是我所说的边界:

这是我的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 { …

我尝试在点击时删除按钮的蓝色背景,如您所见: 在询问之前,我已经进行了大量的研究,我已经检查并尝试了以下主题给出的解决方案:

• 如何删除文本/输入框周围的边框(轮廓)？(铬)
• 删除按钮周围的蓝色框.HTML
• 如果单击按钮,如何删除按钮中的蓝色框阴影边框
• 删除按钮上的蓝色"选定"轮廓
• 删除按钮上的蓝色"选定"轮廓
• 从Chrome中的css自定义样式按钮中删除蓝色边框
• 如何在点击按钮周围移除焦点
• ...

我已经尝试了所有的答案!它适用于PC但不适用于移动设备,如果您使用的是PC,则可以通过使用控制台模拟移动设备来尝试.这是按钮:https: //jsfiddle.net/t4ykshst/

#add {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	outline: none;
	cursor: pointer;
	padding: 10px;
	overflow: hidden;
	border: none;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	color: rgba(255,255,255,0.9);
	text-align: center;
	background: #1abc9c;
	-webkit-box-shadow: 0 4px 3px 2px rgba(0,0,0,0.2) ;
	box-shadow: 0 4px 3px 2px rgba(0,0,0,0.2) ;
}

#add:active {
	opacity: 0.85;
	-webkit-box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
	box-shadow: 2px 2px 2px 0 rgba(0,0,0,0.2) ;
}

<input type="button" id="add" value="+" …

我尝试过以下问题中提出的解决方案无济于事:

从Chrome中的css自定义样式按钮中删除蓝色边框

如果单击按钮,如何删除按钮中的蓝色框阴影边框

如何删除文本/输入框周围的边框(轮廓)？(铬)

如何删除输入文本元素上的边框突出显示

删除按钮上的蓝色"选定"轮廓

无论如何,要在快速点击时阻止Chrome中的元素蓝色突出显示？

单击时,bootstrap按钮显示蓝色轮廓

单击表单输入字段时如何摆脱蓝色外边框？

在HTML中,我有以下内容:

<uib-accordion-heading>
    <div id="fart1" ng-if="!contactsAccordionIsOpen" class="noSelect" style="outline: none;">Contacts<span class="glyphicon glyphicon-plus-sign pull-right"></span></div>
    <div id="fart2" ng-if="contactsAccordionIsOpen" class="noSelect" style="outline: none;">Contacts<span class="glyphicon glyphicon-minus-sign pull-right"></span></div>
</uib-accordion-heading>

整个手风琴标题周围没有出现蓝色轮廓,但形状适合文本.我尝试过内联样式,按ID和类选择,但即使!important它没有改变.

在CSS我有:

#fart1:focus {
    border: none !important;
    outline: none !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#fart2:focus {
    border: none !important;
    outline: none !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.noSelect {
    border: none …

我想在我的收音机被点击/聚焦时删除它给我的蓝色轮廓.我尝试使用outline: none和border: none,但似乎没有任何工作.有人有解决方案吗？

我在说什么的屏幕截图: