CSS Selector for Disabled Input Type="Submit"

CSS selector for disabled input type=submit

Does that work in IE6?

No, IE6 does not support attribute selectors at all, cf. CSS Compatibility and Internet Explorer.

You might find How to workaround: IE6 does not support CSS “attribute” selectors worth the read.

---

EDIT
If you are to ignore IE6, you could do (CSS2.1):

input[type=submit][disabled=disabled],
button[disabled=disabled] {
    ...
}

CSS3 (IE9+):

input[type=submit]:disabled,
button:disabled {
    ...
}

You can substitute [disabled=disabled] (attribute value) with [disabled] (attribute presence).

CSS for input[type=submit]

This one does work.

input[type="submit"].wysija-submit  {    border-radius: 10px;    border: none;    box-shadow: none;    font-family: inherit;    font-size: 50px!important;}

<input class="wysija-submit wysija-submit-field" type="submit" value="Sign-up">

Apply CSS to disabled input button

You can add a new css class here:

submitButtShare.attr("disabled", !checkboxes.is(":checked")).toggleClass('disabled');

now in the css you can use this:

#buttonShareMap.disabled{
    background:#c5c5c5;
    color:#ddd;
}

checkout the sample demo:

$(':checkbox').change(function() {  $('#buttonShareMap').prop('disabled', this.checked).toggleClass('disabled');});

.red {  color: red;  background:#0ff;}#buttonShareMap.disabled {  background: #c5c5c5;  color: #ddd;  cursor: not-allowed;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><input type='button' id='buttonShareMap' class='red' value='buttonShareMap' /><input type='checkbox' />

CSS selector for disabled elements

:disabled pseudo selector will work only for input elements. For div, use div[disabled] to apply css

Use

div[disabled] {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

Demo

input:enabled {    background: #ffff00;}
input:disabled {    background: #dddddd;}div[disabled] {    opacity: 0.4;    filter: alpha(opacity=40); /* For IE8 and earlier */}

<form action="">First name: <input type="text" value="Mickey"><br>Last name: <input type="text" value="Mouse"><br>Country: <input type="text" value="Disneyland" disabled><br>Password: <input type="password" name="password" value="psw" disabled><br>E-mail: <input type="email" value="john@doe.com" name="usremail"></form><div disabled="disabled">should be transparent</div>

Css pseudo classes input:not(disabled)not:[type=submit]:focus

Instead of:

input:not(disabled)not:[type="submit"]:focus {}

Use:

input:not([disabled]):not([type="submit"]):focus {}

disabled is an attribute so it needs the brackets, and you seem to have mixed up/missing colons and parentheses on the :not() selector.

Demo: http://jsfiddle.net/HSKPx/

One thing to note: I may be wrong, but I don't think disabled inputs can normally receive focus, so that part may be redundant.

Alternatively, use :enabled

input:enabled:not([type="submit"]):focus { /* styles here */ }

Again, I can't think of a case where disabled input can receive focus, so it seems unnecessary.

How do I disable form fields using CSS?

This can be helpful:

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

<style type="text/css">
input[name=username] {
    pointer-events: none;
 }
</style>

Update:

and if want to disable from tab index you can use it this way:

 <input type="text" name="username" value="admin" tabindex="-1" >

 <style type="text/css">
  input[name=username] {
    pointer-events: none;
   }
 </style>

How to style a HTML label for disabled input

Based on the comment made by @andi:

input:disabled+label means that the label is immediately AFTER the input. In your HTML, the label comes BEFORE the text input. (but there's no CSS for "before".)

He's absolutely right. But that shouldn't stop us being able to solve the problem with a little trickery!

First step: swap the HTML elements order so that the <label> appears after the <input>. This will allow the styling rules to work as desired.

Then for the fun bit: use CSS to position the labels for text inputs on the left hand side!

input:disabled {  background: #dddddd;}
input:disabled+label {  color: #ccc;}
input[type=text]+label {  float: left;}

<input type="checkbox" disabled="disabled" id="check1"><label for="check1">Check</label><br /><input type="text" id="text1" disabled="disabled"><label for="text1">Text</label><br /><input type="checkbox" id="check2"><label for="check2">Check</label><br /><input type="text" id="text2"><label for="text2">Text</label>

How do you target the disabled state of a submit button?

You can use:

    input[disabled=disabled][type=submit] {
        background:green;
    }

Works on Firefox and is reportedly good on all but IE6. But I haven't personally tested this kind of combo selector.

PS: A more robust, cross-browser method, using jQuery...

$("input[disabled=disabled][type=submit]").css
({
    'background':   'yellow',
    'color':        'blue'
});

Add disabled style (css) to input type file button

Sorry for previous answer.

I suggest you to check this link to know possibility about changing a input file style.

div.fileinputs { position: relative;}
div.fakefile { position: absolute; top: 0px; left: 0px; z-index: 1;}
input.file { position: relative; text-align: right; -moz-opacity:0 ; filter:alpha(opacity: 0); opacity: 0; z-index: 2;}

<div class="fileinputs"> <input type="file" class="file" disabled/> <div class="fakefile">  <input disabled/>  <img src="http://fptp.uthm.edu.my/mba/images/911c660826c0b.png"  style="width:30px;"/> </div></div>

Style disabled button with CSS

For the disabled buttons you can use the :disabled pseudo class. It works for all the elements that have a disabled API (typically form elements).

For browsers/devices supporting CSS2 only, you can use the [disabled] selector.

As with the image, don't put an image in the button. Use CSS background-image with background-position and background-repeat. That way, the image dragging will not occur.

Selection problem: here is a link to the specific question:

• How to disable text selection highlighting

Example for the disabled selector:

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

div {
  padding: 5px 10px;
}

<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>

---

Related Topics