相关疑难解决方法(0)

当一个html元素被"聚焦"(当前被选中/选中)时,许多浏览器(至少是Safari和Chrome)会在它周围放置一个蓝色边框.

对于我正在进行的布局,这会分散注意力并且看起来不正确.

<input type="text" name="user" class="middle" id="user" tabindex="1" />

FireFox似乎没有这样做,或者至少,让我控制它

border: x;

如果有人能告诉我IE的表现如何,我会很好奇.

但让Safari删除这一点点耀斑会很不错.

我已经看到镀铬的边框较厚,:focus但在我的情况下,我也使用了border-radius.反正有没有删除？

使用Chrome或Safari时,一个active text box或text area将border在框周围显示蓝色/橙色.我已经看到一些网站摆脱了这个,但我已经复制了它们CSS,它仍然存在.我该怎么做？

我需要在我的网络应用程序上禁用所选文本的突出显示.我有充分的理由这样做,并知道这通常是一个坏主意.但无论如何我还是需要这样做.如果我需要使用CSS或JS来做这件事并不重要.我主要想要的是去除突出显示元素的蓝色.

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

• 如何删除文本/输入框周围的边框(轮廓)？(铬)
• 删除按钮周围的蓝色框.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 浏览器更新为83并看到option tag它看起来很难看，它在选项中悬停时显示黑色边框。

我试过

option {
    box-shadow: none;
    border: none;
    -webkit-appearance: none;
}

option:hover {
    box-shadow: none;
    border: none;
    -webkit-appearance: none;
}

option {
    box-shadow: none;
    border: none;
    -webkit-appearance: none;
}

option:hover {
    box-shadow: none;
    border: none;
    -webkit-appearance: none;
}

option {
  box-shadow: none;
  border: none;
  -webkit-appearance: none;
}

option:hover {
  box-shadow: none;
  border: none;
  -webkit-appearance: none;
}

但仍然没有运气！！为什么？我不知道。

我想删除那个黑色边框，因为在我的项目中它看起来很难看。

我的需要

我需要与之前的 select 和 option 标签相同的结果。

可能重复:
如何删除文本/输入框周围的边框？(铬)

当表单元素获得焦点时,有没有办法禁用Webkit浏览器生成的彩色阴影？它在Chrome中是黄色的,在Safari中是蓝色的,并且妨碍了我尝试实现的任何自定义焦点样式.

如何设置文本input字段的样式以使其只有border-bottom这样的一个？

预期的文本Input字段

我用ios风格创建了CheckBox:

<form>
<input id="ckbx" type="checkbox"  value="map_one">
</form>

jsFiddle链接

我试图删除单击按钮时创建的蓝色边框,但没有成功.

PLZ帮我删除它.

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

从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 …