CODEWITHSUNDEEP
htmlcss
Barro
Barro

Reputation: 335

Removing blue highlighted text on focus

When I open the modal window, the onfocus text value in the textarea is highlighted in blue color.I'm not sure what CSS properties should be used to removed the highlighted onfocus blue color from the text . I tried the below, but it ain't working.

input[type="text"], textarea{
    outline: none;
    box-shadow:none !important;
    border:1px solid #ccc !important;
}

Text filed value highlighted in blue

Upvotes: 5

Views: 2700

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

An alternative to the user-select property suggested by Marcos is to use the ::selection and ::-moz-selection (on their own rules) to specifically set/unset the color/background of the selected text (without disabling the select functionality).

input[type="text"]::selection,
textarea::selection {
  background-color: inherit;
  color: red;
}
input[type="text"]::-moz-selection,
textarea::-moz-selection {
  background-color: inherit;
  color: red;
}

input[type="text"],
textarea {
  outline: none;
  box-shadow: none !important;
  border: 1px solid #ccc !important;
}
<input type="text" value="test value for selection" />
<hr/>
<textarea>test text for selection</textarea>

Upvotes: 2

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

You can use user-select to avoid the selection of any text

input {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}
<input type="text">

Be careful with this, because you are avoiding to select a prompt to users, and it causes accessibility lost.

Upvotes: 0

Related Questions