IPad और iPhone के लिए स्टाइलिंग इनपुट बटन


215

मैं अपनी वेबसाइट पर इनपुट बटन को स्टाइल करने के लिए CSS का उपयोग कर रहा हूं, लेकिन IOS उपकरणों पर मैक के डिफ़ॉल्ट बटन द्वारा स्टाइल को बदल दिया जाता है। क्या आईओएस के लिए बटन स्टाइल करने का एक तरीका है, या शायद हाइपरलिंक बनाने का एक तरीका है जो सबमिट बटन की तरह व्यवहार करता है?

जवाबों:


524

आप ढूंढ रहे होंगे

-webkit-appearance: none;

बटन दबाना /: सक्रिय स्टाइलिंग में अभी भी अंतर है, है ना? यह आपकी शैलियों को अनदेखा करता है और एक सेमीट्रांसपेरेंट ग्रे ओवरले लागू करता है?
एलन एच।

6
यदि आप @include experimental(appearance, none);
SCSS

1
ऊपर दिया गया लिंक अब मृत हो गया है, दुर्भाग्य से ( Thinkvitamin.com/design/… )।
प्रति क्वेस्ट Aronsson

इसके साथ एक समस्या यह है कि <select>बॉक्स के लिए, यह डेस्कटॉप ब्राउज़र पर तीर को प्रदर्शित नहीं करता है। तो मुझे लगता है कि यह एक मीडिया क्वेरी के साथ सबसे अच्छी जोड़ी है।
andrewtweber

क्या ... क्या यह वास्तव में इतना सरल था? मैंने CSSइसे स्टाइल करने के लिए बहुत सारी लाइनों का उपयोग किया और यह लाइन ट्रिक करने के लिए पर्याप्त थी?


9

मैं हाल ही में खुद इस समस्या को लेकर आया था।

<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->

उम्मीद है की वो मदद करदे।


3
यह अभी भी मुझे एक बटन की ऊंचाई को बदलने की अनुमति नहीं देता है। हालांकि मजेदार बात यह है कि जैसे ही मैं बटन को एक कस्टम चौड़ाई देता हूं कस्टम ऊंचाई को भी ध्यान में रखा जाता है।
फ़्लू

यह UIkit v3 के लिए फिक्स था।
कलोब तालियन

4

नीचे दिए गए सीएसएस का उपयोग करें

input[type="submit"] {
  font-size: 20px;
  background: pink;
  border: none;
  padding: 10px 20px;
}
.flat-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
   border-radius: 0;
}

h2 {
  margin: 25px 0 10px;
  font-size: 20px;
}
<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />

<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />


0

-वेबकिट-उपस्थिति: कोई नहीं;

नोट: बटन को स्टाइल करने के लिए बूटस्ट्रैप का उपयोग करें। उत्तरदायी के लिए सामान्य।


0

मेरे पास आज भी यही मुद्दा था कि प्राइमफेस (प्राइमेंग) और कोणीय 7. का उपयोग करके अपनी शैली में निम्नलिखित जोड़ें

p-button {
   -webkit-appearance: none !important;
}

मैं भी बूटस्ट्रैप का एक बिट का उपयोग कर रहा हूं, जिसमें एक रिबूट है। एसएमएस, जो इसे ओवरराइड करता है (यही कारण है कि इसे जोड़ना पड़ा!)

button {
  -webkit-appearance: button;

}

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.