बटन से बॉर्डर निकालें


109

मैंने मानक बटन छवियों के बजाय बटन बनाने और अपनी स्वयं की छवियां सम्मिलित करने का प्रयास किया। हालाँकि, मानक बटनों से ग्रे बॉर्डर अभी भी बनी हुई है, जो मेरी काली बटन छवियों के बाहर दिखाई दे रही है।

क्या किसी को पता है कि इस ग्रे बॉर्डर को बटन से कैसे हटाया जाए, इसलिए यह सिर्फ छवि ही है? धन्यवाद।


प्रयास करें -webkit-appearance: inherit;या-webkit-appearance:initial
मैक्स

1
@Brut: मैं गलत हो सकता हूं, लेकिन यह मेरे लिए ब्राउज़र-विशिष्ट दिखता है, और मुझे पूरा यकीन है कि जेम्सन कुछ ऐसा चाहता है जो सभी आधुनिक ब्राउज़रों के लिए काम करेगा।
माइकल स्काइपर

जवाबों:


185

जोड़ना

padding: 0;
border: none;
background: none;

अपने बटन के लिए।

डेमो:

https://jsfiddle.net/Vestride/dkr9b/


मैं सराहना करता हूं .. लेकिन मैंने जोड़ा जैसे आपने स्टाइलशीट के लिए कहा था और यह दुर्भाग्य से काम नहीं किया। क्या मुझे इसे सीधे html में एम्बेड करना चाहिए, अगर इससे कोई फर्क पड़ेगा?
जेम्सनडब्ल्यू

मैंने background: none;बटनों के साथ एक फिडल प्लस जोड़ा । फिडल पर एक चोटी लें और देखें कि क्या यह आपके लिए काम करता है।
वेस्ट्राइड

37

यह मेरे लिए पूरी तरह से काम करने लगता है।

button:focus { outline: none; }

4
outline:none;पहुँच कारणों के लिए अनुशंसित नहीं है। यदि आपको फ़ोकस बॉर्डर को हटाना चाहिए, तो कृपया उपयोगकर्ताओं को यह देखने के लिए एक और तरीका प्रदान करें कि उसमें फ़ोकस है। outlinenone.com
वेस्टयूड

9

मुझे वही समस्या हो रही थी और भले ही मैं CSS में अपने बटन को स्टाइल कर रहा था, border:noneलेकिन यह कभी भी नहीं उठाएगा लेकिन जो काम किया था वह सीधे इनपुट बटन पर एक शैली जोड़ रहा था जैसे:

<div style="text-align:center;">
    <input type="submit" class="SubmitButtonClass" style="border:none;" value="" />
</div>

आप इनलाइन शैली के साथ संपत्ति को ओवरराइड करने के लिए CSS झरना का उपयोग कर रहे हैं। आपको सीएसएस कैस्केड और सीएसएस विशिष्टता पर कुछ लेख देखना चाहिए।
DrCord


1

सामान्य ट्रिक यह है कि इमेज को बटन के बजाय लिंक का हिस्सा बनाया जाए। फिर, आप कस्टम हैंडलर के साथ "क्लिक" इवेंट को बांधते हैं।

Jquery-UI या बूटस्ट्रैप जैसे फ्रेमवर्क इसे बॉक्स से बाहर करते हैं। उनमें से किसी एक का उपयोग करने से रास्ते में बहुत सारे आवेदन गर्भाधान में आसानी हो सकती है।


1

आप background:none;border:0pxबटनों को भी आज़मा सकते हैं ।

भी सीएसएस चयनकर्ताओं हैं div#yes button{..}और div#no button{..}। उम्मीद है कि यह मदद करता है


इसके अलावा आप img टैग का उपयोग करने के बजाय छवियों के रूप में बटन की पृष्ठभूमि सेट कर सकते हैं

या शुद्ध सीएसएस में करें। जैसेbackground:#555; font-weight:bold: color:#fff; padding:6px 8px;

0

बटन फोकस पर बटन से डिफ़ॉल्ट 'ब्लू-बॉर्डर' को हटाने के लिए:

Html में:

<button class="new-button">New Button...</button>

और सीएसएस में

button.new-button:focus {
    outline: none;
}

आशा करता हूँ की ये काम करेगा :)


0

इसे सीएसएस के रूप में जोड़ें,

button[type=submit]{border:none;}

-3

$ ("। myButtonClass")। css (["बॉर्डर: कोई नहीं; पृष्ठभूमि-रंग: पीला; गद्दी: 0"]);


3
Lol आपको एक css शैली में बदलाव के लिए jquery का उपयोग नहीं करना चाहिए
zardilior
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.