मैं उस पृष्ठ में मौजूद सभी बटनों पर सीएसएस कैसे लागू कर सकता हूं?

Question

मैं एक सीएसएस शैली वर्ग बनाया है:

.btn { 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
} 

कैसे मैं हर बटन को class="btn" जोड़े बिना सभी बटन जो पेज में मौजूद हैं करने के लिए इस सीएसएस शैली वर्ग आवेदन कर सकते हैं?

Answer 1

button{ 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
} 

या

input[type="button"]{ 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
} 

Answer 2

अपने बटन <input type="button"> हैं या सबमिट करते हैं, तो यह यह करना चाहिए:

input[type="button"], input[type="submit"] { 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
} 

अन्यथा, अगर अपने बटन <button> हैं:

button { 
    color:#050; 
    font: old 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
} 

करने के लिए बटन के सभी तीन प्रकार हड़पने:

button, input[type="button"], input[type="submit"] { 
    color:#050; 
    font: bold 84% 'trebuchet ms',helvetica,sans-serif; 
    background-color:#fed; 
    border:1px solid; 
    border-color: #696 #363 #363 #696; 
} 

Answer 3

input[type=submit], input[type=button], button { 
    ... 
} 

Answer 4

सिर्फ एक टिप्पणी

input[type="button"] 

IE6 जैसे पुराने ब्राउज़रों पर काम करने के लिए नहीं जा रहा है। यदि यह एक समस्या है तो दुर्भाग्य से आपको प्रत्येक वर्ग में अपनी कक्षा जोड़ने की आवश्यकता होगी।

Answer 5

यदि आप सभी शैलियों को स्पष्ट रूप से सेट नहीं करना चाहते हैं, लेकिन कुछ पूर्व-मौजूदा वर्ग (उदाहरण के लिए बूटस्ट्रैप बीटीएन-डिफॉल्ट क्लास) में परिभाषित शैलियों का उपयोग करना चाहते हैं, तो आप ऐसा कुछ कर सकते हैं:

<script> 
$("button").addClass("btn-default"); 
</script> 

मेरे मामले में यह वही था जो मैं खोज रहा था, हालांकि मुझे यकीन है कि इस तरह से ऐसा करने के बारे में कुछ प्रकार की चेतावनी है, या आप उम्मीद करेंगे कि यह सीधे सीएसएस से कुछ करने योग्य होगा।