Removing blue highlighted text on focus

Question

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;
}

Try this out `:focus {outline:none;}` http://stackoverflow.com/questions/2943548/best-way-to-reset-remove-chromes-input-highlighting-focus-border — FBHY, Oct 19 '15 at 14:54

score 2 · Answer 1 · edited May 23 '17 at 12:23

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>

score 0 · Accepted Answer · answered Oct 19 '15 at 14:54

0

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.

answered Oct 19 '15 at 14:54

Marcos Pérez Gude

21,869
4
38
69

1

It is showing the Highlight color on chrome Version 74.0.3729.169 – Narendra Jun 05 '19 at 03:58

Removing blue highlighted text on focus

2 Answers2