ปุ่มปิดการใช้งานรูปแบบด้วย 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');

สำหรับพวกเราทุกคนที่ใช้ bootstrap คุณสามารถเปลี่ยนสไตล์ได้โดยการเพิ่มคลาส "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" นั้นไม่จำเป็นต้องปิดการใช้งานปุ่มเช่นในแบบฟอร์มการส่ง หากต้องการปิดใช้งานลักษณะการทำงานให้ใช้คุณสมบัติที่ปิดใช้งาน:

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