1. 技术文章
  2. How to remove border highlight on an <select> after press it

How to remove border highlight on an <select> after press it

由 纵饮孤独 提交于 2021-02-07 06:39:16

问题


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.

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;
}

Here's the snippet: 

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>

回答1:


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! */
}

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>



回答2:


Just override .form-control:focus with box-shadow: none!important;

.form-control:focus {
  box-shadow: none!important;
}

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>

And if you want to do this just for select use this:

select.form-control:focus {
  box-shadow: none!important;
}


来源：https://stackoverflow.com/questions/48134951/how-to-remove-border-highlight-on-an-select-after-press-it

标签
html
css
bootstrap-4
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!