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

Question

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.

score 4 · Accepted Answer · answered Apr 30 '15 at 10:00

4

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.

answered Apr 30 '15 at 10:00

SHEFEEK A

270
3
14

score 2 · Answer 2 · answered Apr 29 '15 at 16:46

2

You can use the disabled CSS selector.

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

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

answered Apr 29 '15 at 16:46

Christoph

156
1
10

2

Thanks, I am using chose plugin for select boxes, if i use only 'chosen-single' class then its working fine.but here my field has 'chosen-select fields' class due to which changes are not taking place. – SHEFEEK A Apr 29 '15 at 17:21
2

You can use `select:disabled` for select all select box. Independent to the classes. – Christoph Apr 29 '15 at 17:25
2

:Thanks once again for your quick reply, i tried this one also but its doesn't make any changes. – SHEFEEK A Apr 29 '15 at 17:32
2

Demo with other and none class elements [here](http://fiddle.jshell.net/bronni/ar1qoznj/3/). understand I the problem correctly? – Christoph Apr 29 '15 at 17:49

score 1 · Answer 3 · answered Apr 29 '15 at 16:42

1

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>

answered Apr 29 '15 at 16:42

carinlynchin

389
1
3
13

1

Thanks , i have already tried this but here i want field color to be black. when i given 'color:black', its appearing as gray. – SHEFEEK A Apr 29 '15 at 16:50

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

3 Answers3