javascript - 如何使用css删除按钮焦点上的正方形虚线轮廓?
问题描述
我有一个大于符号或<
倒三角形的按钮。当我关注该按钮时,我面临一个问题,它显示为正方形。
预期行为<
:它应该显示符号或倒三角形的虚线侧。不是整条方形虚线。
如果这不可能,我们可以在不删除当前 css 的情况下删除这条虚线。我们可以更新 css。但我们不能不删除原始 css 这是我的代码
https://codepen.io/naveennsit/pen/MWmZxPj
.cls-nav__btn {
background: none;
border: solid currentColor;
border-width: 0 4px 4px 0;
color: #3A3631;
cursor: pointer;
font-size: 0;
height: 22px;
margin-top: -16px;
padding: 2px;
position: absolute;
top: 50%;
transition: border-color .3s;
width: 22px;
z-index: 5;
}
.cls-nav__btn_prev {
left:500px;
transform: translateY(-50%) rotate(135deg);
}
button:focus, a:focus {
outline-offset: 2px;
outline-width: 2px !important;
outline-style: dotted !important;
outline-color: currentColor;
}
<div class="cls-nav">
<button class="cls-nav__btn cls-nav__btn_prev" tabindex="-1" type="button" value="<"></button>
</div>
<div class="cls__track" id="slider1-track" style="">
</div>
解决方案
我不知道显示一半轮廓的任何技术,但您可以确定将其删除。
只需添加以下CSS:
.cls-nav button:focus,
.cls-nav a:focus {
outline: none !important;
}
编辑:想了想 - 找到了一种方法
@Brandon 的回答让我走上了完全隐藏它的轨道,然后添加了一个模拟半轮廓的伪元素。
.cc .cls .cls-nav__btn {
background: none;
border: solid currentColor;
background: none;
border-width: 0 4px 4px 0;
color: #3A3631;
cursor: pointer;
font-size: 0;
height: 22px;
margin-top: -16px;
padding: 2px;
position: absolute;
top: 50%;
transition: border-color .3s;
width: 22px;
z-index: 5;
}
.cc .cls .cls-nav__btn_prev {
left:500px;
transform: translateY(-50%) rotate(135deg);
}
button:focus, a:focus {
outline-offset: 2px;
outline-width: 2px !important;
outline-style: dotted !important;
outline-color: currentColor;
}
.cls-nav button:focus,
.cls-nav a:focus {
outline: none !important;
}
.cls-nav button:focus::after,
.cls-nav a:focus::after {
content: ' ';
position: absolute;
top: -3px;
right: -7px;
bottom: -7px;
left: -3px;
box-sizing: content-box;
border: dotted red;
background: none;
border-width: 0 1px 1px 0;
}
<section class="cc">
<div id="slider1" class="cls cls--fade cls--ltr cls--draggable slick-active"
style="visibility: visible;">
<div class="cls-nav">
<button class="cls-nav__btn cls-nav__btn_prev" tabindex="-1" type="button"></button>
</div>
<div class="cls__track" id="slider1-track" style="">
</div>
</div>
</section>
.cls-nav button:focus::after,
.cls-nav a:focus::after {
content: ' ';
position: absolute;
top: -3px;
right: -7px;
bottom: -7px;
left: -3px;
box-sizing: content-box;
border: dotted red;
background: none;
border-width: 0 1px 1px 0;
}
推荐阅读
- node.js - 如何为 React 应用配置 Google App Engine nodejs8 标准环境?
- javascript - 如何用按钮控制相关的文本输入元素?
- c++ - 如何部署具有所有依赖项的 C++ 项目?
- json - 通过加入数据框(父和子)创建 JSON
- ionic-framework - 我在 ionViewDidLoad 期间分配了一个对象,但该对象仍然是空的
- git - 如何使用 VS Code 修复 git commit 错误“等待您的编辑器关闭文件...”?
- php - composer 在自动加载文件中生成不正确的命名空间
- java - Spring Security 5 Spring MVC Oauth 2 密码授予类型不返回带有 /oauth/token 的令牌
- hyperledger-fabric - Hyperledger Composer:命令“composer network start”失败并出现“错误:REQUEST_TIMEOUT”
- apache - Xamp Apache 没有启动