Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

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

Tags:

html

css

bootstrap-4

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>
like image 279
Anderson Koh Avatar asked Jan 07 '18 06:01

Anderson Koh

People also ask

How do I remove the border from the click input field?

Answer: Use CSS outline propertyIn Google Chrome browser form controls like <input> , <textarea> and <select> highlighted with blue outline around them on focus. This is the default behavior of chrome, however if you don't like it you can easily remove this by setting their outline property to none .

How do I remove border-color?

We can specify the no border property using CSS border: none, border-width : 0, border : 0 properties. Approach 1: We will give border-color, border-style properties to both headings, for showing text with border and no-border. For no border heading, we will use the border-width : 0 which will result in no border.

How do I remove a placeholder border?

Use the :focus pseudo-class with the "no-outline" class to style the form fields that are focused by the user. To have clear fields in your forms, set the outline property to its "none" value, which is used to display no outline.

1 Answers

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>
like image 142
S.Serpooshan Avatar answered Oct 20 '22 13:10

S.Serpooshan
Sign in to Comment

Related questions

Adjusting Thickness of Text Overline
How to create icons like font awesome
Javascript will not pass information into function from html
How to add a switch toggle button to simple form in rails
Semantic HTML for a business card [closed]
Create foundation grid within list elements
Change animation of material-ui dialog show
Is it semantically correct to use h2 tag inside summary tag?
Do I need base href='/'?
How to display hidden characters in PhpStorm, especially line seperators
How do you programmatically apply a CSS class to paragraphs in Jekyll?
How to vertically align image and text in table cell?
Create Form Input with Text Formatting Options giving HTML OUTPUT
making the <area> in a <map> tag visible during development
How to make links work with card-img-overlay in Bootstrap v4
How do I add custom logo in navbar title field in rmarkdown?
jQuery append lose style
How do I set the column width of some column width in datatables
Why HTML/CSS Dropdown Menu links not clicking thru on 1st click, only 2nd+ click works?
Checkbox styling doesn't work on Safari mobile

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!