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

Answer 1

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>