CSS का उपयोग करके इनपुट बटन छवि कैसे बदलें?

Question

इसलिए, मैं एक छवि का उपयोग करके एक इनपुट बटन बना सकता हूं

<INPUT type="image" src="/images/Btn.PNG" value="">

लेकिन, मुझे CSS का उपयोग करके समान व्यवहार नहीं मिल सकता है। उदाहरण के लिए, मैंने कोशिश की है

<INPUT type="image" class="myButton" value="">

जहाँ "myButton" को CSS फ़ाइल में परिभाषित किया गया है

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

यदि वह सब मैं करना चाहता था, तो मैं मूल शैली का उपयोग कर सकता था, लेकिन मैं होवर पर बटन की उपस्थिति को बदलना चाहता हूं (एक myButton:hoverवर्ग का उपयोग करके )। मुझे पता है कि लिंक अच्छे हैं, क्योंकि मैं उन्हें पृष्ठ के अन्य हिस्सों (सिर्फ एक चेक के रूप में) के लिए एक पृष्ठभूमि छवि के लिए लोड करने में सक्षम हूं। मुझे जावास्क्रिप्ट का उपयोग करने के तरीके के वेब पर उदाहरण मिले, लेकिन मैं एक सीएसएस समाधान की तलाश कर रहा हूं।

मैं फ़ायरफ़ॉक्स 3.0.3 का उपयोग कर रहा हूँ अगर यह एक फर्क पड़ता है।

Answer 1

यदि आप CSS का उपयोग करके बटन को स्टाइल करना चाहते हैं, तो इसे टाइप करें = "छवि" के बजाय "सबमिट करें" बटन। type = "image" एक SRC की अपेक्षा करता है, जिसे आप CSS में सेट नहीं कर सकते।

ध्यान दें कि सफारी आपको किसी भी बटन को उस तरीके से स्टाइल नहीं करने देगा जिसे आप खोज रहे हैं। यदि आपको सफ़ारी समर्थन की आवश्यकता है, तो आपको एक छवि रखना होगा और एक ऑनक्लिक फ़ंक्शन करना होगा जो फ़ॉर्म को सबमिट करता है।

Comments

धन्यवाद। छवि के बजाय "सबमिट" का उपयोग करने से छवि लोड हो गई।

— बाल्टीमार्क

सफ़ारी 3 और अप आप चाहते हैं, लेकिन आप बटन शैली के लिए अनुमति देते हैं। और अधिक संगत होने के लिए, इसके बजाय <बटन> का उपयोग करें।

— पलकविहीनता

और अधिक संगत होने के लिए </ button> आप अन्य संगतता मुद्दों को खरीद सकते हैं।

— इगलासियस

दोस्तों, नीचे दिए गए SI वेब डिज़ाइन द्वारा उत्तर की जाँच करें। कृपया वोट करें यदि वे उत्तर बेहतर हैं।

— देवल

Answer 2

आप <button>टैग का उपयोग कर सकते हैं । सबमिट करने के लिए, बस जोड़ेंtype="submit" । तब पृष्ठभूमि छवि का उपयोग करें जब आप चाहते हैं कि बटन ग्राफिक के रूप में दिखाई दे।

इस तरह:

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>

अधिक जानकारी: http://htmldog.com/reference/htmltags/button/

Comments

बस याद रखें कि IE (5,6,7, और 8 (गैर-मानक मोड में) बटन के .innerHTML को सबमिट करेगा, न कि उस मूल्य विशेषता को जो आप बटन पर सेट करते हैं!

— scunliffe

लेकिन <बटन अवशेष की सीमा छवि को कवर किया गया है।

— बीजे पटेल

@scunlife, additin में दिमित्री इनहेरट्लम पोस्ट करने वाले अधिकांश वेबसर्वर्स को पोस्ट किए गए डेटा को स्वीकार नहीं करने का कारण बनता है, क्योंकि यह एक इंजेक्शन के हमले की तरह गंध करता है

— कोहेन

Answer 3

एचटीएमएल

<div class="myButton"><INPUT type="submit" name="" value=""></div>

सीएसएस

div.myButton input {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

यह सफारी में भी, कहीं भी काम करेगा।

Comments

यह सबसे अच्छा जवाब है। धन्यवाद

— बायरन व्हिटलॉक

Answer 4

सबमिट बटन के लिए सीएसएस छवि प्रतिस्थापन के बारे में यह लेख मदद कर सकता है।

"इस पद्धति का उपयोग करके आपको स्टाइल शीट सक्रिय होने पर एक क्लिक करने योग्य छवि मिल जाएगी, और स्टाइल शीट बंद होने पर एक मानक बटन होगा। छवि को बटन टैग में बदलने के तरीकों को लागू करने और इसे सबमिट बटन के रूप में उपयोग करने के लिए है, बजाय इनपुट का उपयोग करना।

और चूंकि बटन सीमाएं मिटा दी जाती हैं, इसलिए यह लिंक के लिए उपयोग किए जाने वाले हाथ के आकार के बटन कर्सर को बदलने की भी सिफारिश करता है, क्योंकि यह उपयोगकर्ताओं को एक दृश्य टिप प्रदान करता है। "

CSS कोड:

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

Comments

इस पद्धति के साथ समस्या यह है कि, यदि क्लाइंट अपने ब्राउज़र में चित्र अक्षम करता है, तो उन्हें एक बटन दिखाई नहीं देता है!

— स्कॉट

Answer 5

यहाँ एक सरल समाधान है, लेकिन कोई अतिरिक्त आस-पास नहीं है:

<input type="submit" value="Submit">

CSS एक बेसिक इमेज रिप्लेसमेंट तकनीक का उपयोग करता है। बोनस अंक के लिए, यह एक छवि स्प्राइट का उपयोग करके दिखाता है:

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

स्रोत: http://work.arounds.org/issue/21/use-css-sprites-with-input-type-submit-buttons/

Comments

अगर विशेषता सीएसएस चयनकर्ता (टाइप = "सबमिट") और स्प्राइट्स के लिए सिफारिश के लिए इस बटन के लिए +2 क्लिक करता है, तो

— हायलेन वैलेड

मैं उस साइट को नियंत्रित नहीं करता हूं। अच्छी बात है कि मैंने अपने उत्तर में समाधान रखा।

— फिलोय

लिंक का अंतिम सहेजा गया संस्करण: web.archive.org/web/20140112085651/http://work.arounds.org/…

— बर्नहार्ड वैगनर

Answer 6

यहाँ इंटरनेट एक्सप्लोरर पर मेरे लिए काम किया गया है, फिलोय द्वारा समाधान के लिए एक मामूली संशोधन।

>#divbutton
{
    position:relative;
    top:-64px;
    left:210px;
    background: transparent url("../../images/login_go.png") no-repeat;
    line-height:3000;
    width:33px;
    height:32px;
    border:none;
    cursor:pointer;
}

Answer 7

आप अपने टैग में लक्ष्य के रूप में blank.gif (1px पारदर्शी छवि) का उपयोग कर सकते हैं

<input type="image" src="img/blank.gif" class="button"> 

और फिर css में स्टाइल बैकग्राउंड:

.button {border:0;background:transparent url("../img/button.png") no-repeat 0 0;}
.button:hover {background:transparent url("../img/button-hover.png") no-repeat 0 0;}

Answer 8

पिछले उत्तरों पर भिन्नता। मैंने पाया कि अपारदर्शिता को सेट करने की आवश्यकता है, निश्चित रूप से यह IE6 और पर काम करेगा। IE8 में लाइन-ऊंचाई समाधान के साथ एक समस्या थी जहां बटन प्रतिक्रिया नहीं करेगा। और इसके साथ ही आपको हैंड कर्सर भी मिलता है!

<div id="myButton">
  <input id="myInputButton" type="submit" name="" value="">
</div>

#myButton {
 background: url("form_send_button.gif") no-repeat;
 width: 62px;
 height: 24px;
 }

#myInputButton { 
 background: url("form_send_button.gif") no-repeat;
 opacity: 0;
 -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 filter: alpha(opacity=0);
 width: 67px;
 height: 26px;
 cursor: pointer;
 cursor: hand;
}

Answer 9

मुझे लगता है कि निम्नलिखित सबसे अच्छा समाधान है:

सीएसएस:

.edit-button {
    background-image: url(edit.png);
    background-size: 100%;
    background-repeat:no-repeat;
    width: 24px;
    height: 24px;
}

एचटीएमएल:

<input class="edit-button" type="image" src="transparent.png" />

Answer 10

बिना js और छवियों के बिना मेरा समाधान यह है:

* HTML:

<input type=Submit class=continue_shopping_2 
name=Register title="Confirm Your Data!" 
value="confirm your data">

* सीएसएस:

.continue_shopping_2:hover{
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;}


.continue_shopping_2{
padding:0 0 3px 0;
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:174px;
height:21px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#919191;
font-family:Verdana;
font-size:13px;
font-style:normal;
line-height:normal;
font-weight:bold;
color:#FFFFFF;}

Comments

इस तरह से अपनी वेबसाइट पर यादृच्छिक लिंक पोस्ट करना उचित नहीं है। मुझे इसका कोई 'उदाहरण' बिल्कुल नहीं दिखता। यदि आप दिखाने के लिए एक उदाहरण बनाना चाहते हैं, तो कृपया एक ऐसा उदाहरण बनाएं जो अपने आप में एक उदाहरण के रूप में कार्य करे - संपूर्ण साइट के संदर्भ में नहीं।

— एंड्रयू बार्बर

यह सही है ... तथ्य यह है कि सीधे सही पृष्ठ तक पहुंचना संभव नहीं है ... केवल 1 आइटम को कार्ट में जोड़ना और चेकआउट करना।

— जॉन

Answer 11

शायद आप सिर्फ .js फ़ाइल को ही आयात कर सकते हैं और वहां पर छवि को बदल सकते हैं, जावास्क्रिप्ट में।

Comments

यह गंभीरता से कर रहा है।

— रीड रिचर्ड्स

Answer 12

मान लेते हैं कि आप इनपुट प्रकार, या यहां तक ​​कि src नहीं बदल सकते। आपके पास केवल खेलने के लिए सीएसएस है।

यदि आप अपनी मनचाही ऊंचाई जानते हैं, और आपके पास एक पृष्ठभूमि छवि का यूआरएल है, जिसका उपयोग आप करना चाहते हैं, तो आप भाग्य में हैं।

ऊँचाई को शून्य और गद्दी-शीर्ष पर उस ऊँचाई पर सेट करें जिसे आप चाहते हैं। यह मूल छवि को दृष्टि से बाहर कर देगा, जिससे आपको अपनी सीएसएस पृष्ठभूमि-छवि दिखाने के लिए पूरी तरह से साफ जगह मिल जाएगी।

क्रोम में काम करता है। यह IE में काम करता है तो कोई विचार नहीं है। बमुश्किल कुछ भी चतुर करता है, इसलिए शायद नहीं।

#daft {
  height: 0;
  padding-top: 100px;
  width: 100px;
  background-image: url(clever.jpg);
}

<input type="image" src="daft.jpg" id="daft">