如何在< select>上删除边框突出显示按下后 [英] How to remove border highlight on an <select> after press it
本文介绍了如何在< select>上删除边框突出显示按下后的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在获得焦点后，如何禁用< select> 边框突出显示(轮廓).我可以为< input> ，< textarea> ，< button> 等其他元素禁用此功能，但不能禁用< select> 标记.
How can I disable the <select> border highlight (outline) after it got focus. I'm able to disable it for the other elements like <input>, <textarea>, <button> but not for <select> tag.
这是我的CSS，我确实包含了 select:focus ，但它不起作用.:(
Here are my CSS, I did include select:focus but it just not working. :(
input:focus,
select:focus,
option:focus,
textarea:focus,
button:focus {
outline: none;
}
以下是代码段:
input:focus,
select:focus,
textarea:focus,
button:focus {
outline: none !important;
}
body {
padding: 40px 20px 20px 20px;
}
.qa-collapse {
background-color: rgb(245, 245, 245);
}
.qa-input {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
border-right: none !important;
border: 1px solid #F2F2F2;
width: 82%;
padding: .25rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-image: none;
background-clip: padding-box;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.qa-search {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: #E01E34;
border: 1px solid #E01E34;
padding: .2rem .75rem;
}
input[type="text"].qa-input::-webkit-input-placeholder {
color: ;
font-size: 80%;
font-family: PosLight;
}
.qa-search img {
margin-top: -3px;
}
.qa-form-inline {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-align: center;
align-items: center;
}
.qa-track-trace p {
font-family: PosLight;
font-size: 12px;
padding: 0 2.6rem 0 0.7rem;
color: #999999;
}
.nav-tabs {
border: 0px;
}
.nav-tabs .nav-link.active {
border: 0px;
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: transparent;
border-color: transparent;
}
.nav-tabs .nav-link:hover {
border-color: transparent;
}
.nav-tabs .nav-link {
border: 0px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
background-color: transparent;
}
.qa-send-lp-tab {
color: rgba(0, 0, 0, .5);
display: block;
padding: 0rem 1rem;
}
.qa-send-lp-tab:hover {
color: rgba(0, 0, 0, .7);
}
.qa-send-lp-tab.active {
color: #E11F34 !important;
}
.qa-track-trace p {
font-family: PosLight;
font-size: 12px;
padding: 0 2.6rem 0 0.7rem;
color: #999999;
}
.qa-input-full {
border-radius: 50px;
border: 1px solid #F2F2F2;
width: 100%;
padding: .25rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-image: none;
background-clip: padding-box;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
input[type="text"].qa-input-full::-webkit-input-placeholder {
color: ;
font-size: 80%;
font-family: PosLight;
}
input[type="text"].qa-input-full::-webkit-input-placeholder {
color: ;
font-size: 80%;
font-family: PosLight;
}
.qa-dropdown {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: #E01E34;
border: 1px solid #E01E34;
padding: .20rem .75rem;
}
.qa-dropdown img {
margin-top: -3px;
}
select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18' height='18' viewBox='0 0 24 24'><path fill='grey' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>") #fff;
/* background: url(../img/dropdown-2.svg); */
/* background: url(../img/dropdown.svg); */
/*background-position: 91.5% 50%; */
background-position: 95% 50%;
background-repeat: no-repeat;
}
select.form-control:not([size]):not([multiple]) {
height: 35px;
border: 1px solid #F2F2F2;
border-radius: 50px;
border: 1px solid #F2F2F2;
width: 100%;
padding: .25rem .75rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.styled-select {
font-size: 12px;
font-family: 'PosLight';
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<form class="qa-form-inline mt-2">
<select name="dbType" id="selectOptions" class="form-control required styled-select">
<option value="option-select" disabled selected>Service</option>
<option value="option-1" class="option-grams">Example</option>
<option value="option-2" class="option-grams">Example</option>
<option value="option-3" class="option-grams">Example</option>
<option value="option-4" class="option-grams">Example</option>
<option value="option-5" class="option-grams">Example</option>
<option value="option-6" class="option-grams">Example</option>
<option value="option-7" class="option-grams">Example</option>
<option value="option-8" class="option-grams">Example</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>推荐答案
我猜是由于引导样式引起的:
As i guessed, its due to bootstrap styles:
.form-control:focus /* => from bootstrap css */
{
...
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* => this cause the highlight! */
}
它为 .form-control:focus 设置一个阴影框.您必须在CSS中覆盖它:
it sets a box-shadow for .form-control:focus. you have to override it in your css:
input:focus,
select:focus, .form-control:focus,
textarea:focus,
button:focus {
outline: none !important;
box-shadow: none !important;
}
body {
padding: 40px 20px 20px 20px;
}
.qa-collapse {
background-color: rgb(245, 245, 245);
}
.qa-input {
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
border-right: none !important;
border: 1px solid #F2F2F2;
width: 82%;
padding: .25rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-image: none;
background-clip: padding-box;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.qa-search {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: #E01E34;
border: 1px solid #E01E34;
padding: .2rem .75rem;
}
input[type="text"].qa-input::-webkit-input-placeholder {
color: ;
font-size: 80%;
font-family: PosLight;
}
.qa-search img {
margin-top: -3px;
}
.qa-form-inline {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-ms-flex-align: center;
align-items: center;
}
.qa-track-trace p {
font-family: PosLight;
font-size: 12px;
padding: 0 2.6rem 0 0.7rem;
color: #999999;
}
.nav-tabs {
border: 0px;
}
.nav-tabs .nav-link.active {
border: 0px;
border-top-right-radius: 0;
border-top-left-radius: 0;
background-color: transparent;
border-color: transparent;
}
.nav-tabs .nav-link:hover {
border-color: transparent;
}
.nav-tabs .nav-link {
border: 0px;
border-top-right-radius: 0px;
border-top-left-radius: 0px;
background-color: transparent;
}
.qa-send-lp-tab {
color: rgba(0, 0, 0, .5);
display: block;
padding: 0rem 1rem;
}
.qa-send-lp-tab:hover {
color: rgba(0, 0, 0, .7);
}
.qa-send-lp-tab.active {
color: #E11F34 !important;
}
.qa-track-trace p {
font-family: PosLight;
font-size: 12px;
padding: 0 2.6rem 0 0.7rem;
color: #999999;
}
.qa-input-full {
border-radius: 50px;
border: 1px solid #F2F2F2;
width: 100%;
padding: .25rem .75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-image: none;
background-clip: padding-box;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
input[type="text"].qa-input-full::-webkit-input-placeholder {
color: ;
font-size: 80%;
font-family: PosLight;
}
input[type="text"].qa-input-full::-webkit-input-placeholder {
color: ;
font-size: 80%;
font-family: PosLight;
}
.qa-dropdown {
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
background-color: #E01E34;
border: 1px solid #E01E34;
padding: .20rem .75rem;
}
.qa-dropdown img {
margin-top: -3px;
}
select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='18' height='18' viewBox='0 0 24 24'><path fill='grey' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>") #fff;
/* background: url(../img/dropdown-2.svg); */
/* background: url(../img/dropdown.svg); */
/*background-position: 91.5% 50%; */
background-position: 95% 50%;
background-repeat: no-repeat;
}
select.form-control:not([size]):not([multiple]) {
height: 35px;
border: 1px solid #F2F2F2;
border-radius: 50px;
border: 1px solid #F2F2F2;
width: 100%;
padding: .25rem .75rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.styled-select {
font-size: 12px;
font-family: 'PosLight';
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<form class="qa-form-inline mt-2">
<select name="dbType" id="selectOptions" class="form-control required styled-select">
<option value="option-select" disabled selected>Service</option>
<option value="option-1" class="option-grams">Example</option>
<option value="option-2" class="option-grams">Example</option>
<option value="option-3" class="option-grams">Example</option>
<option value="option-4" class="option-grams">Example</option>
<option value="option-5" class="option-grams">Example</option>
<option value="option-6" class="option-grams">Example</option>
<option value="option-7" class="option-grams">Example</option>
<option value="option-8" class="option-grams">Example</option>
</select>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>这篇关于如何在< select>上删除边框突出显示按下后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
