CODEWITHSUNDEEP
htmlcss
user3314426
user3314426

Reputation: 33

Disabling or masking read-only text field highlighting or selection through CSS?

Is there a way to disable or mask selected text in a read-only text box using only CSS? I am creating a form using an online form builder that lets me append CSS before the form. I already made the text in the read-only text box "invisible" by making it white to blend in with the background, but if someone hits Ctrl+A to select everything on the page, they are able to read the highlighted text which I don't want them to be able to do. I would like to either block them from being able to highlight text in the read-only text box, or to make the text color while highlighting to be the same color as the highlight color.

Upvotes: 1

Views: 2803

Answers (2)

King King
King King

Reputation: 63327

You can set the user-select property to none for all the read-only fields:

*:read-only, [readonly],[type='readonly'] {
  color:transparent;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}

Fiddle

PS: All other browsers supports :read-only selector well except the so-called FireFox, so we have to work-around a little by using the attribute selector.

Upvotes: 2

G-Cyrillus
G-Cyrillus

Reputation: 105903

give a look at pointer-events in CSS to disallow mouse interaction.

<input type="readonly" class="pointernone" value="readonly + pointer-events:none"/>

.pointernone {pointer-events:none;}

no way to click for a CTRL-A if browser understands pointer-events (.. old IEs ? , well :) )

http://codepen.io/anon/pen/ErwJn/

Upvotes: 2

Related Questions