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

Question

क्या इंटरनेट एक्सप्लोरर में एक बटन की स्टाइल को पूरी तरह से हटाने का एक तरीका है? मैं अपने बटन के लिए सीएसएस स्प्राइट का उपयोग करता हूं, और सब कुछ ठीक दिखता है।

लेकिन जब मैं बटन पर क्लिक करता हूं, तो यह थोड़ा ऊपर जाता है, यह आकार से बाहर दिखता है। क्या सीएसएस क्लिक स्टेट है, या मूसडाउन है? मुझे नहीं पता कि उस स्थिति को क्या ट्रिगर करता है।

मुझे पता है कि यह वास्तव में बड़ी बात नहीं है, लेकिन कभी-कभी यह छोटी चीजें हैं जो मायने रखती हैं।

Answer 1

मैं मान रहा हूं कि जब आप कहते हैं ' बटन पर क्लिक करें, तो यह थोड़ा ऊपर चला जाता है ' आप बटन के लिए माउस डाउन क्लिक स्थिति के बारे में बात कर रहे हैं, और जब आप माउस क्लिक को छोड़ते हैं, तो यह अपनी सामान्य स्थिति में लौटता है ? और बटन का उपयोग करके आप डिफ़ॉल्ट रेंडरिंग को अक्षम कर रहे हैं:

input, button, submit { border:none; } 

यदि ऐसा है तो..

व्यक्तिगत रूप से, मैंने पाया है कि आप वास्तव में इस IE देशी कार्रवाई को रोक / ओवरराइड / अक्षम नहीं कर सकते हैं, जिसने मुझे इस आंदोलन की अनुमति देने के लिए अपने मार्कअप को थोड़ा बदल दिया और विभिन्न राज्यों के लिए बटन के समग्र स्वरूप को प्रभावित नहीं किया।

यह मेरा अंतिम चिह्न है:

<span class="your-button-class">
    <span>
        <input type="Submit" value="View Person">
    </span>
</span>

Answer 2

मुझे लगता है कि यह अधिक गहन दृष्टिकोण प्रदान करता है:

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

<button>Example</button>

Comments

मुझे नहीं लगता कि पृष्ठभूमि में 'कोई नहीं' है - और महत्वपूर्ण कोई अच्छा नहीं है।

— शेरिफेरेरेक

आमतौर पर, जब आप ऐसा कर रहे होते हैं तो आप मौजूदा शैलियों को ओवरराइड करना चाहते हैं जो एक बटन के लिए मौजूद होती हैं। यह दुर्लभ है कि आप इसे साफ, बिना रुके HTML के साथ करना चाहते हैं, इसलिए इसका उपयोग करें !important। कहा कि मैंने इसे हटा दिया है क्योंकि यह एक स्थिति का निर्णय है। background: noneपूरी तरह से मान्य है: stackoverflow.com/questions/20784292/…

— केविन लेरी

प्रत्येक अपने स्वयं के संबंध में महत्वपूर्ण! मुझे नहीं लगता कि मैं ऐसी परियोजना पर काम कर सकता हूं जहां मुझे इसका उपयोग करने के लिए मजबूर किया गया था। रे: 'कोई नहीं' यहाँ एक संदर्भ है जो एक SO पोस्ट से बेहतर है। जब आप 'पृष्ठभूमि' का उपयोग करते हैं, तो आप वास्तव में शॉर्टहैंड और क्लोबरिंग का उपयोग कर रहे हैं।

— शेरिफडेरेक

मैं अपने आप को एक बटन के अंदर एक छवि और कुछ पाठ को स्टाइल करने के बीच के अंतर पर चला रहा था और यह उसी तरह दिखता था जैसे यह <button/>मेरे मामले में ... एक font: inherit;चाल के रूप में होता है। धन्यवाद!

— केट

मुझे लगता है कि पहुँच योग्य उद्देश्यों के लिए आप शायद उस रूपरेखा को वहाँ छोड़ना चाहते हैं। अन्यथा जब आप इस पर टैब करते हैं तो कोई दृश्य क्यू नहीं है जहां आप हैं। हालांकि महान जवाब!

— जॉन हूपर

Answer 3

आपका प्रश्न "इंटरनेट एक्सप्लोरर" कहता है, लेकिन अन्य ब्राउज़रों में रुचि रखने वालों के लिए, अब आप all: unsetउन्हें अनस्टाइल करने के लिए बटन पर उपयोग कर सकते हैं ।

यह IE या एज 18 में काम नहीं करता है, लेकिन यह हर जगह अच्छी तरह से समर्थित है।

https://caniuse.com/#feat=css-all

सफ़ारी रंग चेतावनी:color उपयोग करने के बाद बटन के पाठ को सेट करना all: unset13.1 सफ़ारी में विफल हो सकता है, जो कि WebKit में बग के कारण है । (बग को सफारी 14 और बाद में तय किया जाएगा।) " काले रंग के लिए all: unsetसेट -webkit-text-fill-colorहै, और यह रंग को ओवरराइड करता है।" आप सेट पाठ करने की आवश्यकता है colorउपयोग करने के बाद all: unset, दोनों सेट करना सुनिश्चित करें colorऔर -webkit-text-fill-colorएक ही रंग है।

पहुँच चेतावनी: उन उपयोगकर्ताओं के लिए जो माउस पॉइंटर का उपयोग नहीं कर रहे हैं, सुनिश्चित करें कि एक्सेस योग्यता के लिए कुछ :focusस्टाइल, जैसे फिर से जोड़ना सुनिश्चित करें ।button:focus { outline: orange auto 5px }

और मत भूलना cursor: pointer। सहित सभी स्टाइल all: unsetको हटा देता है , जो आपके माउस कर्सर को बटन पर मँडराते समय एक इंगित हाथ की तरह दिखता है। आप लगभग निश्चित रूप से उस वापस लाना चाहते हैं।cursor: pointer

button {
  all: unset;
  color: blue;
  -webkit-text-fill-color: blue;
  cursor: pointer;
}

button:focus {
  outline: orange 5px auto;
}

<button>check it out</button>

Comments

इसके लिए शुक्रिया!

— विल एडगर

यह एक्सेसिबिलिटी कारणों से उचित नहीं है। आपको उदाहरण के लिए, तत्व स्थिति के outlineलिए सभी शैलियों को वापस जोड़ना होगा :focus।

— डेविन

@ अंडरवियर महान बिंदु! मैंने एक outlineशैली को फिर से जोड़ने के सुझाव के साथ अपनी पोस्ट को अपडेट किया । (लेकिन मुझे नहीं लगता कि कुछ और है जो हमें a11y उद्देश्यों के लिए फिर से जोड़ने की आवश्यकता है। क्या आप कुछ भी जानते हैं?)

— Dan Fabulich

Answer 4

अपने बटन से सीमा हटाने का प्रयास करें:

input, button, submit
{
  border:none;
}

Answer 5

बूटस्ट्रैप में 4 सबसे आसान है। आप कक्षाओं का उपयोग कर सकते हैं: bg-transparentऔरborder-0

Comments

shadow-noneमेरे लिए + और यह पर्याप्त है। धन्यवाद!

— Bachet

Answer 6

मुझे लगता है कि यह बटन "सक्रिय" स्थिति है।

Comments

यह सक्रिय अवस्था होनी चाहिए, आप इसके लिए सही +1 हैं। लेकिन मुझे यह ठीक से काम करने के लिए नहीं मिला

— सैफ बेंच

"मुझे लगता है" एक जवाब नहीं है।

— शिंज़ौ