css - डिफ़ॉल्ट रंग दिखाते हुए क्लिक पर बूटस्ट्रैप बटन




twitter-bootstrap button (4)

मैं नीचे कोड के साथ बटन रंग को स्टाइल करने की कोशिश कर रहा हूं, जब तक मैं बटन क्लिक नहीं करता तब तक रंग काम करता है, बटन डिफ़ॉल्ट रंग दिखाता है, मैं बटन के रंगों को क्लिक करके कैसे निर्दिष्ट करूं?

.btn-success { 
 color: #ffffff; 
 background-color: #161617; 
 border-color: #494F57; 
} 

.btn-success:hover, 
.btn-success:focus, 
.btn-success:active, 
.btn-success.active, 
.open .dropdown-toggle.btn-success { 
 color: #ffffff; 
 background-color: #1F2838; 
 border-color: #494F57; 
} 

.btn-success:active, 
.btn-success.active, 
.open .dropdown-toggle.btn-success { 
 background-image: none; 
} 

.btn-success.disabled, 
.btn-success[disabled], 
fieldset[disabled] .btn-success, 
.btn-success.disabled:hover, 
.btn-success[disabled]:hover, 
 fieldset[disabled] .btn-success:hover, 
.btn-success.disabled:focus, 
.btn-success[disabled]:focus, 
fieldset[disabled] .btn-success:focus, 
.btn-success.disabled:active, 
.btn-success[disabled]:active, 
fieldset[disabled] .btn-success:active, 
.btn-success.disabled.active, 
.btn-success[disabled].active, 
fieldset[disabled] .btn-success.active { 
background-color: #161617; 
border-color: #494F57; 
} 

.btn-success .badge { 
  color: #161617; 
 background-color: #ffffff; 
}

आपको उस कड़ी मेहनत के लिए !important घोषणा का उपयोग करना होगा।

.btn-success:hover, .btn-success:active, .btn-success:focus {
  color: #ffffff !important;
  background-color: #1F2838 !important;
  border-color: #494F57 !important;
}

इन विभिन्न बटनों को ओवरराइड करने के लिए बूटस्ट्रैप स्रोत से कुछ प्रेरणा, जहां $ ऑफ-व्हाइट और $ ब्रांड-ब्लैक हमारे द्वारा परिभाषित किए गए हैं:

.btn-success {
  &:hover,
  &:focus,
  &.focus {
    color: $off-white;
    background-color: $brand-black;
  }

  &:active,
  &.active,
  &.disabled,
  &:disabled {
    color: $off-white;
    background-color: $brand-black;

    &:focus,
    &.focus {
      color: $off-white;
      background-color: $brand-black;
    }
  }
}

बस अपने सीएसएस में निम्नलिखित कोड जोड़ें

.btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open>.dropdown-toggle.btn-success.focus, .open>.dropdown-toggle.btn-success:focus, .open>.dropdown-toggle.btn-success:hover
{
color: #fff;
background-color: #161617; 
border-color: #494F57; 
}

यदि आप एक निजी परियोजना पर काम कर रहे हैं, न कि एक टीम के साथ, यह ध्यान देने योग्य है कि आप वर्ग पर एक ही शैली की घोषणाओं के लिए "महत्वपूर्ण" लागू करके छद्म वर्ग शैलियों को ओवरराइड कर सकते हैं:

.btn-success { color: #ffffff !important; background-color: #161617 !important; border-color: #494F57 !important; }

आम तौर पर, इससे दूर रहना एक अच्छा विचार है! महत्वपूर्ण है क्योंकि यह बीटीएन-सफलता वर्ग पर किसी भी और सभी रंग, पृष्ठभूमि रंग और सीमा-रंग शैली घोषणाओं को ओवरराइड करेगा (जब तक कि आप स्टाइल घोषणाओं को फिर से ओवरराइड न करें! बाद में महत्वपूर्ण स्टाइल शीट हालांकि यह हास्यास्पद है)।

यदि लक्ष्य सबसे छोटा फ़ाइल आकार संभव है, और आप इस वर्ग का हर जगह उसी तरह उपयोग कर रहे हैं - जिसका मतलब कोई इनलाइन शैलियों नहीं है - तो यह आपका सबसे अच्छा विकल्प हो सकता है।

वैकल्पिक रूप से, लेकिन एक ही सोच का उपयोग करके, आप एक नया कस्टम क्लास नामकरण करने की कोशिश कर सकते हैं जैसे कि .btn-success successn-success successn-success सफलता- और केवल इसे बीटीएन-सफलता के बाद लागू करें जहां आपको ओवरराइड का उपयोग करने की आवश्यकता है।

यद्यपि एक पकड़ है हालांकि: यदि आप किसी भी अन्य बूटस्ट्रैप .btn-group के साथ .btn-success successnn-success सफलता या महत्वपूर्ण हैं। Btn-group,! महत्वपूर्ण किसी भी छद्म वर्ग शैली को भीतर घोषित कर देगा। इस मामले में आप लड़के के उत्तर (कस्टम क्लास के बिना कस्टम स्टाइल घोषणाओं) के साथ बेहतर हो सकते हैं।





colors