我已经看到铬把一个更厚的边界:焦点,但它看起来在我的情况下,我已经使用边界半径也。有办法移除它吗?
你应该可以用
outline: none;
但请记住,这对可用性有潜在的负面影响:很难判断一个元素是否被聚焦,当你使用Tab键遍历表单的所有元素时,这很糟糕——当一个元素被聚焦时,你应该以某种方式反映。
要删除默认焦点,请在默认的.css文件中使用以下内容:
:focus {outline:none;}
然后你可以通过元素单独控制焦点边框的颜色,或者在默认的.css中:
:focus {outline:none;border:1px solid red}
显然,用你选择的十六进制代码替换红色。
你也可以保持边界不变,并控制背景颜色(或图像)来突出显示字段:
:focus {outline:none;background-color:red}
:-)
这肯定有用。橙色的轮廓不会再出现了。 通用于所有标签:
*:focus {
outline: none;
}
特定于某些标记,例如:input标记
input:focus{
outline:none;
}
我必须做以下所有的事情来完全删除它:
outline-style: none;
box-shadow: none;
border-color: transparent;
例子: 按钮{ border - radius: 20 px; 填充:20 px; } .no-focusborder:专注{ outline-style:没有; 不必:没有; 边框颜色:透明; 背景颜色:黑色; 颜色:白色; } <p>在空白区域单击,然后按“Tab”键 <button> button 1(不变)</button> . /button> <button class="no-focusborder">按钮2(没有焦点边框,自定义焦点指示器显示焦点存在,但不需要的高亮已经消失 / / < br > < br > < br / > < br / > < br / > < br / >
问题是你已经有了一个大纲。Chrome仍然改变了一些东西,这是一个真正的痛苦。我不知道该改变什么:
.search input {
outline: .5em solid black;
width:41%;
background-color:white;
border:none;
font-size:1.4em;
padding: 0 0.5em 0 0.5em;
border-radius:3px;
margin:0;
height:2em;
}
.search input:focus, .search input:hover {
outline: .5em solid black !important;
box-shadow:none;
border-color:transparent;;
}
.search button {
border:none;
outline: .5em solid black;
color:white;
font-size:1.4em;
padding: 0 0.9em 0 0.9em;
border-radius: 3px;
margin:0;
height:2em;
background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
background: -webkit-linear-gradient(#4EB4F8, #4198DE);
background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
background: -ms-linear-gradient(#4EB4F8, #4198DE);
background: -o-linear-gradient(#4EB4F8, #4198DE);
background: linear-gradient(#4EB4F8, #4198DE);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
zoom: 1;
}
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 在JS的Chrome CPU配置文件中,'self'和'total'之间的差异
- 谷歌chrome扩展::console.log()从后台页面?
- 下一个元素的CSS选择器语法是什么?
- 未捕获的SyntaxError:
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- Access-Control-Allow-Origin不允许Origin < Origin >
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素,而不占用文档流中的空间
- 如何设置断点在内联Javascript在谷歌Chrome?
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?