那些遇到过的问题

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

And*_*Koh 5 html css bootstrap-4

<select>聚焦后如何禁用边框突出显示（轮廓）。我可以禁用它像其他元素<input>，<textarea>，<button>而不是<select>标签。

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

input:focus,
select:focus,
option:focus,
textarea:focus,
button:focus {
    outline: none;
}
Run Code Online (Sandbox Code Playgroud)

这是代码段： 

input:focus,
select:focus,
option:focus,
textarea:focus,
button:focus {
    outline: none;
}
Run Code Online (Sandbox Code Playgroud) 
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';
}
Run Code Online (Sandbox Code Playgroud)

S.S*_*han 7

正如我所猜测的，这是由于引导程序样式：

.form-control:focus /* => from bootstrap css */
{
 ...
 outline: 0;
 box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* => this cause the highlight! */
}
Run Code Online (Sandbox Code Playgroud)

它为 设置了一个框阴影.form-control:focus。你必须在你的 css 中覆盖它：

.form-control:focus /* => from bootstrap css */
{
 ...
 outline: 0;
 box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* => this cause the highlight! */
}
Run Code Online (Sandbox Code Playgroud) 
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';
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

1548 次

最近记录：

8 年，4 月 前
相关归档
使页脚正确粘贴到页面底部 203
什么是.tpl文件？PHP,网页设计 88
将CSS类添加到Html.BeginForm() 71
使用jQuery获取所选选项的文本 45
将<br />转换为新行以在文本区域中使用 41
Bootstrap和Font真棒`最新`CDN链接？ 25
使用Python请求获取HTML？ 21
如何定位提交按钮的禁用状态？ 19
JSF/Facelets:使用<h:outputStylesheet>标记无法识别CSS文件 18
CSS表td vertical-align text-top 17
难疑归档
从Git中的分支中删除提交 3035
在C#中将int转换为枚举 3015
如何在Java中声明和初始化数组？ 1946
打印Java数组最简单的方法是什么？ 1852
以像素为单位获取屏幕尺寸 1798
int32的最大值是多少？ 1383
Python字符串格式:%vs. .format 1323
如何删除重复的行？ 1254
如何使用$ scope.$ watch和$ scope.$在AngularJS中申请？ 1076
使用node.js作为简单的Web服务器 1068