How do I disable form fields using CSS

Question

Is it possible to disable form fields using CSS  I of course know about the attribute disabled  but is it possible to specify this in a CSS rule  Something like -   lt input type  text  name  username  value  admin   gt   lt style type  text css  gt    input name username        disabled  true     Does not work         lt  style gt    The reason I m asking is that  I have an application where the form fields are autogenerated  and fields are hidden shown based on some rules  which run in Javascript   Now I want to extend it to support disabling enabling fields  but the way the rules are written to directly manipulate the style properties of the form fields  So now I have to extend the rule engine to change attributes as well as style of form fields and somehow it seems less than ideal   It s very curious that you have visible and display properties in CSS but not enable disable  Is there anything like it in the still-under-works HTML5 standard  or even something non-standard  browser specific

User · Answer

This can be done for a non-critical purpose by putting an overlay on top of your input element. Here's my example in pure HTML and CSS.

https://jsfiddle.net/1tL40L99/

    <div id="container">
        <input name="name" type="text" value="Text input here" />
        <span id="overlay"></span>
    </div>

    <style>
        #container {
            width: 300px;
            height: 50px;
            position: relative;
        }
        #container input[type="text"] {
            position: relative;
            top: 15px;
            z-index: 1;
            width: 200px;
            display: block;
            margin: 0 auto;
        }
        #container #overlay {
            width: 300px;
            height: 50px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 2;
            background: rgba(255,0,0, .5);
        }
    </style>

User · Answer

The practical solution is to use CSS to actually hide the input   To take this to its natural conclusion  you can write two html inputs for each actual input  one enabled  and one disabled  and then use javascript to control the CSS to show and hide them

User · Answer

This can be helpful    lt input type  text  name  username  value  admin   gt    lt style type  text css  gt  input name username        pointer-events  none      lt  style gt    Update   and if want to disable from tab index you can use it this way     lt input type  text  name  username  value  admin  tabindex  -1   gt     lt style type  text css  gt    input name username        pointer-events  none         lt  style gt

User · Answer

You can fake the disabled effect using CSS   pointer-events none    You might also want to change colors etc

User · Answer

input name username          disabled  true     Does not work           I know this question is quite old but for other users who come across this problem  I suppose the easiest way to disable input is simply by   disabled    lt input type  text  name  username  value  admin  disabled   gt   lt style type  text css  gt    input name username  disabled       opacity  0 5  important     Fade effect        cursor  not-allowed     Cursor change to disabled state        lt  style gt    In reality  if you have some script to disable the input dynamically automatically with javascript or jquery that would automatically disable based on the condition you add   In jQuery for Example   if  condition       Make this input prop disabled state      input   prop  disabled   true     else      Do something else     Hope the answer in CSS helps

User · Answer

first time answering something  and seemingly just a bit late     I agree to do it by javascript  if you re already using it   For a composite structure  like I usually use  I ve made a css pseudo after element to block the elements from user interaction  and allow styling without having to manipulate the entire structure   For Example    lt div id test class stdInput gt       lt label class stdInputLabel for selecterthingy gt A label for this input lt  label gt       lt label class selectWrapper gt            lt select id selecterthingy gt                lt option selected disabled gt Placeholder lt  option gt                lt option value 1 gt Option 1 lt  option gt                lt option value 2 gt Option 2 lt  option gt            lt  select gt       lt  label gt   lt  div gt    I can place a disabled class on the wrapping div   disabled        position   relative       color      grey     disabled after       position  absolute      left       0      top        0      width      100       height     100       content            This would grey text within the div and make it unusable to the user   My example JSFiddle

User · Answer

I am always using    input disabled       pointer-events none      color  AAA      background  F5F5F5      and then applying the css class to the input field     lt input class  disabled  type  text  value  90  name  myinput  id  myinput    gt

User · Answer

A variation to the pointer-events  none  solution  which resolves the issue of the input still being accessible via it s labeled control or tabindex  is to wrap the input in a div  which is styled as a disabled text input  and setting input   visibility  hidden    when the input is  disabled   Ref  https   developer mozilla org en-US docs Web CSS visibility Values   x000D   x000D  div dependant   x000D    border  0 1px solid rgb 170  170  170   x000D    background-color  rgb 235 235 228   x000D    box-sizing  border-box  x000D    x000D  input type  checkbox   not  checked    div dependant first-of-type   x000D    display  inline-block  x000D    x000D  input type  checkbox   checked   div dependant first-of-type   x000D    display  contents  x000D    x000D  input type  checkbox   not  checked    div dependant first-of-type  gt  input   x000D    visibility  hidden  x000D    x000D   lt form gt  x000D     lt label for  chk1  gt Enable textbox  lt  label gt  x000D     lt input id  chk1  type  checkbox    gt  x000D     lt br   gt  x000D     lt label for  text1  gt Input textbox label lt  label gt  x000D     lt div class  dependant  gt  x000D       lt input id  text1  type  text    gt  x000D     lt  div gt  x000D   lt  form gt  x000D   x000D   x000D    The disabled styling applied in the snippet above is taken from the Chrome UI and may not be visually identical to disabled inputs on other browsers  Possibly it can be customised for individual browsers using engine-specific CSS extension -prefixes  Though at a glance  I don t think it could  Microsoft CSS extensions  Mozilla CSS extensions  WebKit CSS extensions  It would seem far more sensible to introduce an additional value visibility  disabled or display  disabled or perhaps even appearance  disabled  given that visibility  hidden already affects the behavior of the applicable elements any associated control elements

User · Answer

You cannot do that I m afraid  but you can do the following in jQuery  if you don t want to add the attributes to the fields  Just place this inside your  lt head gt  lt  head gt  tag    document  ready function           inputClass   focus function          this  blur                 If you are generating the fields in the DOM  with JS   you should do this instead     document  ready function         document  on  focus     inputClass   function          this  blur

User · Answer

There s no way to use CSS for this purpose  My advice is to include a javascript code where you assign or change the css class applied to the inputs  Something like that     x000D   x000D  function change input     x000D       id input1   x000D     toggleClass  class disabled   x000D     toggleClass  class enabled    x000D     x000D       class disabled   attr  disabled        x000D       class enabled   removeAttr  disabled        x000D    x000D   class disabled   background-color    FF0000    x000D   class enabled   background-color    00FF00    x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt  x000D   lt form gt    x000D   Input   lt input id  id input1  class  class enabled    gt    x000D    lt input type  button  value  Toggle  onclick  change input      gt   x000D   lt  form gt  x000D   x000D   x000D

User · Answer

It s very curious that you have visible and display properties in CSS but not enable disable    It s very curious that you think that s very curious  You re misunderstanding the purpose of CSS  CSS is not meant to change the behavior of form elements  It s meant to change their style only  Hiding a text field doesn t mean the text field is no longer there or that the browser won t send its data when you submit the form  All it does is hide it from the user s eyes   To actually disable your fields  you must use the disabled attribute in HTML or the disabled DOM property in JavaScript

User · Answer

Since the rules are running in JavaScript  why not disable them using javascript  or in my examples case  jQuery        fieldId   attr  disabled    disabled      Disable     fieldId   removeAttr  disabled      Enable   UPDATE  The attr function is no longer the primary approach to this  as was pointed out in the comments below  This is now done with the prop function       input    prop   disabled   true      Disable     input    prop   disabled   false      Enable

User · Answer

You can t use CSS to disable Textbox  solution would be HTML Attribute   disabled  disabled

[html] How do I disable form fields using CSS?

Examples related to html

Examples related to css