CSS가있는 스타일 비활성화 버튼

다음 피들에서 볼 수 있듯이 이미지가 포함 된 버튼의 스타일을 변경하려고합니다.

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

이 예에는 이미지가 없으며 두려워요.

나는 노력하고있다 :

1. background-color비활성화 된 버튼의 변경
2. 비활성화 된 버튼에서 이미지 변경
3. 비활성화되면 호버 효과 비활성화
4. 버튼에서 이미지를 클릭하고 드래그하면 이미지를 개별적으로 볼 수 있습니다. 나는 그것을 피하고 싶다
5. 버튼의 텍스트를 선택할 수 있습니다. 나는 그것을 피하고 싶다.

나는에서 시도했다 button[disabled]. 그러나 일부 효과를 비활성화 할 수 없습니다. 좋아 top: 1px; position: relative;하고 이미지.

비활성화 된 버튼의 경우 :disabled의사 요소를 사용할 수 있습니다 . 모든 요소에 적용됩니다.

CSS2 만 지원하는 브라우저 / 장치의 경우 [disabled]선택기를 사용할 수 있습니다 .

이미지와 마찬가지로 버튼에 이미지를 넣지 마십시오. CSS를 사용 background-image하여 background-position하고 background-repeat. 그렇게하면 이미지 끌기가 발생하지 않습니다.

선택 문제 : 다음은 특정 질문에 대한 링크입니다.

• 텍스트 선택 강조 표시를 비활성화하는 방법은 무엇입니까?

비활성화 된 선택기의 예 :

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>

다음을 사용하여 비활성화 된 버튼을 선택할 수 있어야한다고 생각합니다.

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

페이지에 아래 코드를 추가하십시오. 버튼 이벤트를 변경하지 않고 버튼을 비활성화 / 활성화하려면 Javascript에서 버튼 클래스를 추가하거나 제거하십시오.

방법 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>

방법 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>

비활성화 된 버튼에 회색 버튼 CSS를 적용합니다.

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;
}

으로 CSS :

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

그 버튼에 장식을 추가 할 수 있습니다. 상태를 변경하려면 jquery 를 사용할 수 있습니다

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

부트 스트랩을 사용하는 우리 모두에게 "disabled"클래스를 추가하고 다음을 사용하여 스타일을 변경할 수 있습니다.

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;
}

"disabled"클래스를 추가한다고해서 제출 양식과 같은 버튼이 반드시 비활성화되는 것은 아닙니다. 동작을 비활성화하려면 disabled 속성을 사용하십시오.

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

몇 가지 예제가 포함 된 작동중인 바이올린이 여기에 있습니다 .

버튼이 비활성화되면 불투명도를 직접 설정합니다. 우선 불투명도를

.v-button{
    opacity:1;    
}

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

다음 해결책을 고려하십시오

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

그리고 scss로 변경하면 다음을 사용하십시오.

button {
  backgroud-color: #007700
  &:disabled {
    backgroud-color: #cccccc
  }
}

아래와 같이 CSS를 적용해야합니다.

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