एक HTML बटन की पूरी स्टाइल निकालें/सबमिट करें

मैं सभी ब्राउज़र के लिए सीएसएस में सबमिट बटन को स्टाइल कर रहा हूं, यानीको छोड़कर सभी ब्राउज़र में ठीक काम करता हूं जब मैं सबमिट बटन पर क्लिक करता हूं तो यह थोड़ा ऊपर चला जाता है। यह आकार से बाहर दिखता है। मैंने यानी एक विशिष्ट सीएसएस का उपयोग किया।एक HTML बटन की पूरी स्टाइल निकालें/सबमिट करें

.button 
{ 
    width : 80px; 
    background : none; 
    cursor : pointer; 
    font-family : 'voltaeftu-regular',Times New Roman; 
    font-size : 16px; 
    color : #fff; 
    border : none; 
    margin  : 0px; 
    padding  : 0px; 
}

स्रोत

2010-06-24 Mayur

मुझे लगता है कि यदि समस्या है पता नहीं है, लेकिन आप यह भी सक्रिय राज्य स्थापित करने के लिए कोशिश कर सकते:

.button, .button:active{ 
... 
}

संपादित

यहाँ कोड है कि मैं प्रयोग किया जाता है: IE7 में निम्नलिखित मिनी नमूना प्रयुक्त और नहीं कर सकते बटन चलती देखें:

<html> 
<head> 
<style type="text/css"> 
.button 
{ 
width : 80px; 
background : none; 
cursor : pointer; 
font-family : 'voltaeftu-regular',Times New Roman; 
font-size : 16px; 
color : #fff; 
border : 1px solid #0f0; 
margin  : 0px; 
padding  : 0px; 
} 
</style> 
</head> 
<body style="background:#f00;"> 
    <input class="button" type="submit"/> 
</body> 
</html>

बस एक बो सेट बटन परिवेश देखने के लिए rder। कोड मेरे लिए काम कर रहा है।

स्रोत

2010-06-24 13:58:42 Marks

HI अंक मैंने कोशिश की है लेकिन काम नहीं कर रहा है इस समस्या को ठीक करने का कोई तरीका है – Mayur

आप रीसेट सीएसएस में से किसी एक को आजमा सकते हैं और देख सकते हैं कि समस्या अभी भी है या नहीं। लेकिन एक रीसेट सीएसएस पर तेजी से देखो में मैंने बटन के लिए कुछ भी सेट नहीं देखा जो इसका कारण बन सकता है। – Marks

हां, मुझे डर है कि स्टाइल बटन के साथ यह एक अपरिहार्य समस्या है कि आईई (और ओपेरा) क्लिक किए जाने पर बटन की सामग्री को नीचे और दाईं ओर दाईं ओर ले जाएगा।

एक <button> एक <input type="button"> के बजाय इसके अंदर एक <span> साथ उपयोग करें:

आप संभव तरीकों में से एक गुच्छा यहाँ मिल गया है। relative बटन और absolute पर top/left0 पर स्थिति रखें, ताकि बटन सामग्री का आंदोलन अवधि को प्रभावित न करे। बदसूरत, और अन्य ब्राउज़रों में तोड़ देगा, तो आप केवल यह स्टाइल आईई-एंड-होप-ओपेरा के लिए आवेदन करना चाहते हैं।
अपने click ईवेंट पर लागू स्क्रिप्ट के साथ, वास्तविक बटन की बजाय बटन के रूप में स्टाइल किए गए लिंक का उपयोग करें। बटन के विपरीत, आप लिंक के लिए लगातार स्टाइल पर पूर्ण नियंत्रण प्राप्त करते हैं। मैं इसके खिलाफ सलाह दूंगा क्योंकि आप लिंक व्यवहारों के एक लोड में खींच रहे हैं जो बटन के लिए समझ में नहीं आता है, जैसे कि मध्य-क्लिक, राइट-क्लिक-बुकमार्क, ड्रैग-एंड-ड्रॉप इत्यादि। बहुत से लोग लिंक का उपयोग करते हैं बटन कार्यों को करने के लिए, लेकिन आईएमओ यह बेहद अवांछित है। (खासकर जब वे javascript: लिंक ... भयंकर का उपयोग करें।)
अपने click घटना के लिए लागू किया स्क्रिप्ट के साथ, इस तरह के एक वास्तविक बटन की बजाय एक <span> के रूप में एक निष्क्रिय तत्व का प्रयोग करें। फिर, आप पूर्ण स्टाइल नियंत्रण प्राप्त करते हैं। यह वही है जो 'टिप्पणी जोड़ें' जैसी कार्रवाइयों के लिए उपयोग करता है। समस्या यह है कि आप कुंजीपटल नेविगेशन तोड़ते हैं; आप नेविगेट करने और नियंत्रण को सक्रिय करने के लिए टैब, स्पेस इत्यादि का उपयोग नहीं कर सकते हैं। आप तत्व को tabindex विशेषता देकर अधिकांश ब्राउज़रों में कीबोर्ड नेविगेशन सक्षम कर सकते हैं, लेकिन एक निष्क्रिय तत्व पर tabindex डालने से अवैध HTML है। आप वैकल्पिक रूप से इसे स्क्रिप्ट से लिख सकते हैं, और स्पेस को अनुमति देने के लिए स्क्रिप्ट भी जोड़ सकते हैं या गलत-बटन को सक्रिय करने के लिए वापस आ सकते हैं। लेकिन आप कभी भी काफी ब्राउज़र फॉर्म फ़ील्ड व्यवहार को पुन: उत्पन्न नहीं करेंगे।
पूरी चीज़ को <input type="image"> के साथ बदलें। स्वाभाविक रूप से आप छवि पर पिक्सेल-सही नियंत्रण प्राप्त करते हैं! लेकिन प्रतिपादन शैलियों से मिलान करने की कोशिश कर रहा है, और प्रत्येक बटन के लिए एक नई छवि उत्पन्न करना आम तौर पर गर्दन में दर्द का अधिक होता है।

विकल्प 2 और 3 में भी समस्या है कि वे एक जावास्क्रिप्ट निर्भरता पेश करते हैं, इसलिए जेएस अनुपलब्ध होने पर आपका फॉर्म टूट जाएगा।आप मार्कअप में सामान्य <button> का उपयोग करके और स्क्रिप्ट से अन्य नियंत्रणों के साथ इसे बदलकर, या यदि आप उन्हें स्क्रिप्ट से बना रहे हैं, तो भी कोई समस्या नहीं है। लेकिन अंत में, मेरा सामान्य निष्कर्ष यह है कि यह परिणाम बहुत अधिक प्रयास और बहुत नाजुक परिणाम है, और सबसे अच्छा बात यह है कि विकल्प 0:

इसके साथ लाइव करें। आम तौर पर यह उस चीज को खराब नहीं करता है जब आप इसे क्लिक करते समय बटन सामग्री थोड़ा सा स्थानांतरित करते हैं।

स्रोत

2010-06-24 15:12:59 bobince

यह मुझे लंबे समय तक भी खराब कर देता है, लेकिन मुझे एक सभ्य समाधान मिला है।

सबसे पहले, आपको अपने सीएसएस में एक विशिष्ट ब्राउज़र को लक्षित करने के कुछ तरीके की आवश्यकता होगी। आप http://rog.ie/post/9089341529/html5boilerplatejs

<script> 
var b = document.documentElement; 
b.setAttribute('data-useragent', navigator.userAgent); 
b.setAttribute('data-platform', navigator.platform); 
</script>

अगला से Modernizr, या मेरी निजी पसंदीदा, इस प्यारा सा टुकड़ा इस्तेमाल कर सकते हैं, अपने HTML दस्तावेज़ में, अपने बटन के भीतर, एक <span> टैग कि बटन की सामग्री रखती है जोड़ें। शैली यह अनुकूल ब्राउज़रों में ठीक देखने के लिए है, तो अपने सीएसएस में बटन के :active शैलियों के कोड के इस बिट जोड़ें:

html[data-useragent*='Opera']

आप किसी भी ब्राउज़र नाम के साथ Opera की जगह ले सकता है, तो शैली अपनी पसंद के span।

वह कुछ इस तरह लग सकता है:

html[data-useragent*='Opera'] button:active span { 
    position: relative; 
    left: -1px; 
    top: -1px; 
}

यह एक सा hacky, और इस तरह एक छोटी सी समस्या के लिए शायद overkill है, लेकिन यह काम करता है। सबसे अच्छा, आप सब कुछ पर सटीक नियंत्रण है। तुम भी बस Windows मशीनों, या iPads (data-platform='iPad' साथ), या एक ब्राउज़र के विशेष संस्करण, इस तरह लक्षित कर सकते हैं:

html[data-useragent*='Chrome/13.0']

गुड लक!

स्रोत

2012-06-10 17:36:20

यह अधिक अपवॉट प्राप्त करना चाहिए – Forza

एक HTML बटन की पूरी स्टाइल निकालें/सबमिट करें

उत्तर

संबंधित मुद्दे