CODEWITHSUNDEEP
htmlcss
m00t13
m00t13

Reputation: 65

CSS get rid of blue outline in textareas/selects when focused

I already know how to get rid of text input outlines with 

input:focus {
    outline:none;
}

but it doesn't work with textareas and selects. Thanks

EDIT: Already tried textarea:focus and select:focus, which don't work.

Upvotes: 1

Views: 95

Answers (2)

Ferrmolina
Ferrmolina

Reputation: 2771

The :focus isn't required. Try this:

HTML:

<textarea placeholder="without class"></textarea>

CSS:

textarea {
  outline: none;
}

Without class Demo

But if you can set a class, much better.

HTML:

<textarea  class="no-focus" placeholder="Look ma, no focus!"></textarea>

<select class="no-focus">
  <option value="">Option, no focus!</option>
  <option value="">Option, no focus!</option>
  <option value="">Option, no focus!</option>
</select>


<textarea class="focus" placeholder="Your amazing textarea with focus"></textarea>
<select class="focus">
  <option value="">Option, with focus</option>
  <option value="">Option, with focus</option>
  <option value="">Option, with focus</option>
</select>

CSS:

.no-focus {
  outline: none;
}
.focus {
  outline-color: yellow;
}
/* Just for demo */
textarea {
  width: 100%;
  height: 100px;
}
select {
  padding: 20px 0px;
  width: 100%;
  margin-bottom: 30px;
}

Live Demo

Upvotes: 0

Kashif Latif
Kashif Latif

Reputation: 677

no need for :focus you can simply do that by

input[type="text"], textarea, select {outline:none}

here is the working demo Link

Upvotes: 1

Related Questions