CSS disabled 효과 - CSS disabled hyogwa

I'm trying to change the style of a button with an embedded image as seen in the following Fiddle:

http://jsfiddle.net/krishnathota/xzBaZ/1/

In the example there are no images, I'm afraid.

I'm trying to:

1. Change the background-color of the button when it is disabled
2. Change the image in the button when it is disabled
3. Disable the hover effect when disabled
4. When you click on the image in the button and drag it, the image can be seen separately; I want to avoid that
5. The text on the button can be selected. I want to avoid that, too.

I tried doing in button[disabled]. But some effects could not be disabled. like top: 1px; position: relative; and image.

teylyn

33.6k3 gold badges51 silver badges70 bronze badges

asked Feb 7, 2013 at 11:31

Krishna ThotaKrishna Thota

6,14012 gold badges53 silver badges79 bronze badges

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>

connexo

51.2k13 gold badges81 silver badges115 bronze badges

answered Feb 7, 2013 at 11:47

5

I think you should be able to select a disabled button using the following:

button[disabled=disabled], button:disabled {
    // your css rules
}

answered Feb 7, 2013 at 11:41

Billy MoatBilly Moat

20.5k7 gold badges44 silver badges37 bronze badges

2

Add the below code in your page. No changes made to button events, to disable/enable the button simply add/remove the button class in JavaScript.

Method 1

 <asp Button ID="btnSave" CssClass="disabledContent" runat="server" />

<style type="text/css">
    .disabledContent 
    {
        cursor: not-allowed;
        background-color: rgb(229, 229, 229) !important;
    }

    .disabledContent > * 
    {
        pointer-events:none;
    }
</style>

Method 2

<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />

<style type="text/css">
    .btn-disable
        {
        cursor: not-allowed;
        pointer-events: none;

        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #ffffff;

        }
</style>

answered Dec 23, 2014 at 14:20

1

By CSS:

.disable{
   cursor: not-allowed;
   pointer-events: none;
}

Them you can add any decoration to that button. For change the status you can use jquery

$("#id").toggleClass('disable');

answered Nov 13, 2017 at 15:33

AlvargonAlvargon

3062 silver badges9 bronze badges

To apply grey button CSS for a disabled button.

button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
  background-color: #ddd;
  background: #ddd;
}

answered Jun 2, 2015 at 10:10

ngrashiangrashia

9,7595 gold badges42 silver badges58 bronze badges

For all of us using bootstrap, you can change the style by adding the "disabled" class and using the following:

HTML

<button type="button"class="btn disabled">Text</button>

CSS

.btn:disabled,
.btn.disabled{
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}
.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}

Remember that adding the "disabled" class doesn't necessarily disable the button, for example in a submit form. To disable its behaviour use the disabled property:

<button type="button"class="btn disabled" disabled="disabled">Text</button>

A working fiddle with some examples is available here.

answered Sep 24, 2017 at 11:50

c-chavezc-chavez

6,8315 gold badges31 silver badges48 bronze badges

consider the following solution

.disable-button{ 
  pointer-events: none; 
  background-color: #edf1f2;
}

answered Oct 9, 2019 at 7:25

Sahil RalkarSahil Ralkar

2,15321 silver badges22 bronze badges

2

When your button is disabled it directly sets the opacity. So first of all we have to set its opacity as

.v-button{
    opacity:1;    
}

Punit Gajjar

4,5237 gold badges32 silver badges64 bronze badges

answered May 30, 2017 at 4:44

kushal Baldevkushal Baldev

6691 gold badge10 silver badges32 bronze badges

Need to apply css as belows:

button:disabled,button[disabled]{
    background-color: #cccccc;
    cursor:not-allowed !important;
  }

answered Aug 2, 2019 at 6:36

input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
  //  apply css here what u like it will definitely work...
}

Qiu

5,49110 gold badges49 silver badges56 bronze badges

answered Sep 20, 2014 at 6:06

And if you change your style (.css) file to SASS (.scss) use:

button {
  background-color: #007700;
  &:disabled {
    background-color: #cccccc;
  }
}

answered Apr 3, 2019 at 12:23

AkosthaAkostha

5946 silver badges8 bronze badges