html - 按下后如何删除 <select> 上的边框突出显示

标签 html css bootstrap-4

如何禁用 <select>获得焦点后的边框高亮(轮廓)。我可以为其他元素禁用它，例如 <input> , <textarea> , <button>但不适用于 <select>标签。

这是我的 CSS，我确实包含了 select:focus但它只是不起作用。 :(

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>

最佳答案

如我所料，这是由于 Bootstrap 样式:

.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 中覆盖它:

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>

关于html - 按下后如何删除 <select> 上的边框突出显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48134951/

上一篇：javascript - 反转有序列表的编号顺序

下一篇：javascript - 如何根据网速播放 gif 或视频？

相关文章：

html - 多列表格中的前导点

html - 我的导航中下拉列表的背景颜色无法正常显示

html - 为什么我不能为内容标签添加样式？

javascript - 检查过渡是否将应用于元素

html - 可以使用 Angular 4 中的插值将值添加到内联样式

javascript - 将用户输入从文本框附加到新元素

html - 如何在一行中制作部分？

html - Bootstrap 4 Footer 没有放在底部

css - 使 navbar-brand 更大的字体使其与旧版 Safari 中的导航项重叠

javascript - 使用ajax将时间以秒为单位传递给div

©2024 IT工具网  联系我们