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? — Nico O
– Nico O, Commented Nov 23, 2014 at 16:20

Ortal Blumenfeld Lagziel · Accepted Answer · 2014-11-24 15:01:15Z

1

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' />

answered Nov 24, 2014 at 15:01

Ortal Blumenfeld Lagziel

2,5753 gold badges26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

you-rick · Accepted Answer · 2014-11-23 16:25:16Z

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, 2014 at 16:25

you-rick

1851 gold badge3 silver badges12 bronze badges

1 Comment

Ortal Blumenfeld Lagziel Over a year ago

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

Max · Accepted Answer · 2014-11-23 16:26:39Z

0

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.

answered Nov 23, 2014 at 16:26

Max

1,14011 silver badges23 bronze badges

Collectives™ on Stack Overflow

CSS Disable the selection of input control content

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related