CODEWITHSUNDEEP
htmlcss
user348716
user348716

Reputation:

How do I disable form fields using CSS?

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 -

<input type="text" name="username" value="admin" >
<style type="text/css">
  input[name=username] {
    disabled: true; /* Does not work */
  }
</style>

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 the 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)?

Upvotes: 261

Views: 745046

Answers (15)

Fables Alive
Fables Alive

Reputation: 2808

using javascript:

let element = document.getElementById("formElement1")
element.disabled = true

Upvotes: 1

fbarikzehy
fbarikzehy

Reputation: 5405

The CSS property-value pair pointer-events: none will disable clicking to select the element:

input[name=username] {
    pointer-events: none;
}
<input type="text" name="username" value="admin">

If you want to disable tabbing via the tab index, set the HTML disabled attribute (no CSS needed):

<input type="text" name="username" value="admin" disabled>

Upvotes: 160

Thiago Mata
Thiago Mata

Reputation: 2959

Using CSS properties, we can easily manipulate the label and the input.

For example:

html {
  font-size: 45px;
  --pointer-event: none;
  --message: "NOT CLICKABLE";
}
.element label, .element label input {
    pointer-events: var(--pointer-events);
}
.element label::after {
    content: var(--message);    
}
.element label { 
  user-select: none;
  animation-duration: 10s;
  animation-name: blink;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  display: block;
  width: 600px;
  height: 100px;
  background-color: #FFDDDD;
  border-color: black;
  border-style: solid;
  border-width: 2px;
}

@keyframes blink {
    0% {
        --pointer-event: all;
        --message: "CLICKABLE";
      color: blue;
    }
    60% {
      --pointer-event: none;
      --message: "NOT CLICKABLE";
      color: red;
    }
    80% {
      --pointer-events: none;
      --message: "NOT CLICKABLE";
      color: red;
    }
    100% {
      --pointer-events: all;
      --message: "CLICKABLE";
      color: blue;
    }
}
<div class="element">
  <label>
    <input type="checkbox">
    Click me
  </label>
</div>

Upvotes: 0

Avatar
Avatar

Reputation: 15176

I am always using:

input.disabled {
  pointer-events:none;
  color:#AAA;
  background:#F5F5F5;
}

and then applying the css class to the input field:

<input class="disabled" type="text" value="90" name="myinput" id="myinput">

Upvotes: 21

BoltClock
BoltClock

Reputation: 723568

It's very curious that you have visible and display properties in CSS but not enable/disable.

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.

Upvotes: 68

Larchy
Larchy

Reputation: 183

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:

<div id=test class=stdInput>
    <label class=stdInputLabel for=selecterthingy>A label for this input</label>
    <label class=selectWrapper>
         <select id=selecterthingy>
             <option selected disabled>Placeholder</option>
             <option value=1>Option 1</option>
             <option value=2>Option 2</option>
         </select>
    </label>
</div>

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

Upvotes: 13

Matthew Millar
Matthew Millar

Reputation: 132

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

div.dependant {
  border: 0.1px solid rgb(170, 170, 170);
  background-color: rgb(235,235,228);
  box-sizing: border-box;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type {
  display: inline-block;
}
input[type="checkbox"]:checked ~ div.dependant:first-of-type {
  display: contents;
}
input[type="checkbox"]:not(:checked) ~ div.dependant:first-of-type > input {
  visibility: hidden;
}
<form>
  <label for="chk1">Enable textbox?</label>
  <input id="chk1" type="checkbox" />
  <br />
  <label for="text1">Input textbox label</label>
  <div class="dependant">
    <input id="text1" type="text" />
  </div>
</form>

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.

Upvotes: 2

Shaze
Shaze

Reputation: 972

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'

<input type="text" name="username" value="admin" disabled />
<style type="text/css">
  input[name=username]:disabled {
    opacity: 0.5 !important; /* Fade effect */
    cursor: not-allowed; /* Cursor change to disabled state*/
  }
</style>

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.

Upvotes: 11

Dutchie432
Dutchie432

Reputation: 29160

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

Upvotes: 117

Joel Barba
Joel Barba

Reputation: 113

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 :

function change_input() {
	$('#id_input1')
		.toggleClass('class_disabled')
		.toggleClass('class_enabled');
		
	$('.class_disabled').attr('disabled', '');
	$('.class_enabled').removeAttr('disabled', '');
}
.class_disabled { background-color : #FF0000; }
.class_enabled { background-color : #00FF00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form> 	
	Input: <input id="id_input1" class="class_enabled" />		
	<input type="button" value="Toggle" onclick="change_input()";/>	
</form>

Upvotes: 2

DeFeNdog
DeFeNdog

Reputation: 1210

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>

Upvotes: 1

ANaimi
ANaimi

Reputation: 6499

You can fake the disabled effect using CSS.

pointer-events:none;

You might also want to change colors etc.

Upvotes: 226

Cfrim
Cfrim

Reputation: 980

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 <head></head> 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();
  }); 
});

Upvotes: 4

graphicdivine
graphicdivine

Reputation: 11211

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.

Upvotes: 19

Vishwanath Dalvi
Vishwanath Dalvi

Reputation: 36601

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

disabled="disabled"

Upvotes: 25

Related Questions