CSS के साथ स्टाइल अक्षम बटन

Question

मैं एक छवि के साथ एक बटन की शैली को बदलने की कोशिश कर रहा हूँ जैसा कि निम्नलिखित फिडल में देखा गया है:

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

उदाहरण में कोई चित्र नहीं हैं, मुझे डर है।

मैं कोशिश कर रहा हूँ:

1. background-colorअक्षम होने पर बटन बदलें
2. अक्षम होने पर बटन में छवि बदलें
3. अक्षम होने पर होवर प्रभाव को अक्षम करें
4. जब आप बटन में छवि पर क्लिक करते हैं और इसे खींचते हैं, तो छवि को अलग से देखा जा सकता है; मैं उससे बचना चाहता हूं
5. बटन पर पाठ का चयन किया जा सकता है। मैं उससे भी बचना चाहता हूं।

मैंने अंदर करने की कोशिश की button[disabled]। लेकिन कुछ प्रभावों को अक्षम नहीं किया जा सका। जैसी top: 1px; position: relative;और छवि।

Answer 1

अक्षम बटन के लिए आप :disabledछद्म तत्व का उपयोग कर सकते हैं । यह सभी तत्वों के लिए काम करता है।

केवल CSS2 का समर्थन करने वाले ब्राउज़रों / उपकरणों के लिए, आप [disabled]चयनकर्ता का उपयोग कर सकते हैं ।

छवि के साथ, बटन में एक छवि मत डालो। सीएसएस का उपयोग 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>

Comments

सीएसएस 2 या 3 (या दोनों) के लिए लागू है?

— ViniciusPires

जहाँ तक मुझे पता है, :disabledचयनकर्ता एक CSS3 चयनकर्ता है। background-image, background-repeat, background-positionसीएसएस 2 में काम कर रहे हैं

— beerwin

तो शायद एक: अक्षम, [विकलांग] CSS2 & 3 में काम करेगा?

— ViniciusPires

बस ध्यान दें, वह ="true"हिस्सा disabled="true"नहीं है जो इसे अक्षम बना रहा है। आप उपयोग disabled="false"कर सकते हैं या disabled="cat"यह अभी भी अक्षम होगा। या बस disabledकोई मूल्य नहीं है। यह संपत्ति केवल Html में मौजूद / छोड़ी जा सकती है, या जावास्क्रिप्ट के साथ जोड़ा जा सकता है सच / गलत

— Drenai

Answer 2

मुझे लगता है कि आपको निम्नलिखित का उपयोग करके एक अक्षम बटन का चयन करने में सक्षम होना चाहिए:

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

Comments

क्या मैं होवर को अक्षम कर सकता हूँ ?? और मैंने सुना है कि IE6 में काम नहीं करेगा?

— कृष्णा थोटा

मुझे नहीं लगता कि आप कर सकते हैं, लेकिन मैं 100% निश्चित नहीं हूं। यदि आप अक्षम बटनों पर भी विकलांगों का एक वर्ग जोड़ सकते हैं तो आप शायद इसे उस वर्ग के माध्यम से कर सकते हैं।

— बिली मोत

Answer 3

अपने पेज में नीचे कोड जोड़ें। मुझ पर विश्वास करें, बटन घटनाओं में कोई बदलाव नहीं, बटन को अक्षम / सक्षम करने के लिए बस जावास्क्रिप्ट में बटन वर्ग जोड़ें / निकालें।

विधि 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>

Comments

ठीक वही जो मेरे द्वारा खोजा जा रहा था। बटन अक्षम है लेकिन सक्षम दिखता है!

— डोमी

बटन को अक्षम महसूस करने के लिए नीचे दिए गए सीएसएस कोड रंग जोड़ें: # c0c0c0; पृष्ठभूमि-रंग: #ffffff;

— तमिलनाथन के

Answer 4

अक्षम बटन के लिए ग्रे बटन 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;
}

Answer 5

CSS द्वारा :

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

उन्हें आप उस बटन के लिए किसी भी सजावट जोड़ सकते हैं। स्थिति बदलने के लिए आप jquery का उपयोग कर सकते हैं

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

Answer 6

बूटस्ट्रैप का उपयोग करके हम सभी के लिए, आप "अक्षम" वर्ग को जोड़कर और निम्नलिखित का उपयोग करके शैली को बदल सकते हैं:

एचटीएमएल

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

सीएसएस

.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>

कुछ उदाहरणों के साथ एक काम करने वाला फिडेल यहां उपलब्ध है ।

Answer 7

जब आपका बटन अक्षम होता है तो यह सीधे अपारदर्शिता को सेट करता है। इसलिए सबसे पहले हमें इसकी अस्पष्टता को निर्धारित करना होगा

.v-button{
    opacity:1;    
}

Answer 8

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

Answer 9

निम्नलिखित समाधान पर विचार करें

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

Comments

यह समाधान ऐप / सेवा की कमजोरी को बढ़ाएगा जो कि यह निर्माणाधीन है।

— फ्रेंको गिल

@FrancoGil आप सही हैं लेकिन यह अक्षम बटन प्राप्त करने का एक तरीका हो सकता है

— साहिल रलकर

Answer 10

और यदि आप एससीएस उपयोग में बदलते हैं:

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

Answer 11

बेल के रूप में सीएसएस लगाने की जरूरत:

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