CSS에서 스타일 비활성화 버튼

CSS에서 스타일 비활성화 버튼

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

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

예제에는 이미지가 없습니다.

저는 이렇게 하려고 합니다.

1. 변경합니다.background-color버튼이 비활성화되어 있을 때
2. 비활성화된 경우 버튼의 이미지 변경
3. 사용 안 함으로 설정된 경우 호버 효과 사용 안 함
4. 버튼에서 이미지를 클릭하고 드래그하면 이미지가 따로 보일 수 있습니다. 그것을 피하고 싶습니다.
5. 버튼의 텍스트를 선택할 수 있습니다.저도 그것을 피하고 싶습니다.

제가 해봤는데요.button[disabled]. 그러나 일부 효과는 비활성화할 수 없습니다.맘에 들다top: 1px; position: relative;이미지.

비활성화된 버튼의 경우:disabled사이비 계급그것은 모든 요소에 효과가 있습니다.disabledAPI(일반적으로 폼 요소).

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 기준:

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

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

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

비활성화된 버튼에 대해 회색 버튼 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;
}

다음과 같은 해결책을 생각해 봅니다.

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

부트스트랩을 사용하는 모든 사용자의 경우 "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;
}

제출 양식과 같이 "사용 불가능" 클래스를 추가한다고 해서 반드시 단추가 사용 불가능한 것은 아닙니다.동작을 사용하지 않도록 설정하려면 사용하지 않도록 설정된 속성을(를)

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

몇 가지 예를 다룬 작업 자료가 여기에 있습니다.

버튼을 비활성화하면 불투명도가 직접 설정됩니다.그래서 우선 우리는 그 불투명성을 다음과 같이 설정해야 합니다.

.v-button{
    opacity:1;    
}

다음과 같이 CSS를 적용해야 합니다.

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

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

스타일(.css) 파일을 SASS(.scss)로 변경할 경우 다음을 사용합니다.

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

Angular에서는 비활성화 상태를 위해 CSS의 pass 값으로 버튼을 비활성화할 수 있습니다.

html

<button
   [disabled]="true">
</button>

CSS

.button-action.disabled {
  // some css
}

버튼을 동적으로 비활성화하려면 다음을 추가할 수 있습니다.

CSS -

button:disabled, button[disabled]{
  cursor: not-allowed;
}

HTML-

<button [disabled]="true"> Button name </button>

언급URL : https://stackoverflow.com/questions/14750078/style-disabled-button-with-css