CODEWITHSUNDEEP
cssdisabled-control
SHEFEEK A
SHEFEEK A

Reputation: 270

How to make a disabled select box look like a normal text box(css only)

I tried to change the inline css of the select box as below

.chosen-disabled .chosen-single {
  cursor: default;
  color: #000;
  border: 1px solid #444; 
}

The select box appeared to be faded but I need it to be look like a normal text field(but still disabled).

Please help me here and thanks in advance.

Upvotes: 4

Views: 3130

Answers (3)

SHEFEEK A
SHEFEEK A

Reputation: 270

Thank @Christoph and @Carine, i override the chose disable class by giving inline css as 

.chosen-disabled {
    opacity: 1 !important;
}

now its working fine, thanks once again for your support.

Upvotes: 4

Christoph
Christoph

Reputation: 156

You can use the disabled CSS selector.

input[type="text"]:disabled {
    background: #dddddd;
}

Demo: http://fiddle.jshell.net/bronni/ar1qoznj/

Upvotes: 2

carinlynchin
carinlynchin

Reputation: 389

DEMO

I am not 100% if this is what you are looking for but it seems to work based off what you stated you wanted (the text is red when disabled is applied)

CSS:

select {
  cursor: default;
  color: #000;
  border: 3px solid #444; 
}

select.disabled {
    color:red;
}

HTML:

<select disabled class="disabled">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

Upvotes: 1

Related Questions