0

I've got a block(div) which contains select tag, button tag and etc. I need a solution to specify this block to "readonly" property. using css or js+css, which means that a content of this block will not be either clickable or selectable.

Thanx

dreamweiver
  • 6,002
  • 2
  • 24
  • 39
malefique
  • 49
  • 1
  • 8
  • you don't need readonly, you need `[disabled]`, but you'd need a JavaScript to enforce sub-elements to be disabled – zzzzBov Feb 12 '13 at 14:15
  • possible duplicate of [css rule to disable text selection highlighting](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting) – Tony The Lion Feb 14 '13 at 14:09

4 Answers4

4

use for this block:

div {
    position: relative;
    z-index: -1:
}
dfsq
  • 191,768
  • 25
  • 236
  • 258
AnilkaBobo
  • 260
  • 1
  • 9
  • FYI, this fails if you use Tab button on the Keyboard. If you have currently clicked on an other element outside the wrapper and hit Tab, you will be able to jump to the input inside of this "readonly" div. So this solution is not foolproof. – Devner Jul 17 '16 at 03:49
1

simplest would be to add a layer on top of it --

  • make the parent element ( the container you now have ) position:relative
  • add a child element ( a blank div with class layer )
  • add position:absolute; width: 100%; height: 100%; top:0; left: 0; z-index:999; to the new div with class layer
Nick Andriopoulos
  • 10,313
  • 6
  • 32
  • 56
1

with css 

#divid { pointer-events: none; }

Update:

<div id="wrapper">
    <input type="button" value="test" onclick="javascript: alert(1);" />
</div>

css

#wrapper { pointer-events: none; }
Hary
  • 5,690
  • 7
  • 42
  • 79
  • isn't it experimental property? – AnilkaBobo Feb 12 '13 at 14:20
  • I mean it probably will not work in all browsers. I may be wrong – AnilkaBobo Feb 12 '13 at 14:32
  • 1
    yes the updated code works in `chrome` and `firefox` and not in `IE` – Hary Feb 12 '13 at 14:37
  • FYI, this fails if you use Tab button on the Keyboard. Pointer events kick in only when you use mouse and try to click on the input inside the div. If you have currently clicked on an other element outside the wrapper and hit Tab, you will be able to jump to the input inside of this "readonly" div. So this solution is not foolproof. – Devner Jul 17 '16 at 03:36
0

Try this:

-webkit-user-select: none;  
-moz-user-select: none;  
-ms-user-select: none;  
user-select: none;
Barnee
  • 3,212
  • 8
  • 41
  • 53
  • @malefique take a look at [this post](http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting). – Barnee Feb 12 '13 at 14:37