CSS Disable the selection of input control content

Question

I want to disallow user from select a content of input control by css. Im trying to add the following attributes to the control:

 #editContainer
  {    
     user-select: none
    -webkit-user-select: none
    -khtml-user-select: none
    -moz-user-select: none
  }

<div id='editContainer'>
    <input id='daysInput' />
     <span id='daysString'></span>
     <input id='hoursInput' />
     <span>:</span>
     <input id='minuteInput' />
</div>

but it is not working...

how can i prevent from users to select content of controls?

possible duplicate of [How do I disable form fields using CSS?](http://stackoverflow.com/questions/5963099/how-do-i-disable-form-fields-using-css) — Nico O, Nov 23 '14 at 16:20

score 1 · Answer 1 · answered Nov 24 '14 at 15:01

You need to add the following:

-moz-user-select: none; 
-webkit-user-select: none; 
-ms-user-select:none;
 user-select:none;' 
 unselectable='on'  
onselectstart='return false;'  
onmousedown='return false;'

For example:

<input  style='-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;'  unselectable='on'  onselectstart='return false;'  onmousedown='return false;' id='daysInput' />

score 0 · Answer 2 · answered Nov 23 '14 at 16:25

0

You can't do this with text input fields, if they are focused (i.e. opened for editing)

It will work only with attr. disabled="disabled"

<div id='editContainer'>
    <input id='daysInput' disabled="disabled" value="Test"/>
     <span id='daysString'></span>
     <input id='hoursInput'  disabled="disabled" value="Test"/>
     <span>:</span>
     <input id='minuteInput'  disabled="disabled" value="Test"/>
</div>

Check out this example http://jsfiddle.net/ce7st2ms/7/

answered Nov 23 '14 at 16:25

you-rick

185
1
3
12

I dont want that the control will be disabled I want to allow user to change the content on it... I dont want that the user select the control's text – Ortal Blumenfeld Lagziel Nov 24 '14 at 07:21

score 0 · Answer 3 · answered Nov 23 '14 at 16:26

I do not think you'll find a good solution for this.

The only (JavaScript) way I see, is to use several elements and position absolute. The top element (div or any other you like) should have the same size if input. This element can prevent selection.

In the case you need input some data to input field, you temporary hide this element and back when input finished.

CSS Disable the selection of input control content

3 Answers3