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