सीएसएस के साथ एक पाठ इनपुट का मूल्य बदलें?

Question

क्या सीएसएस के साथ टेक्स्ट इनपुट के मूल्य (डिफ़ॉल्ट पाठ जो प्रदर्शित होता है) को बदलने के लिए वैसे भी है?

मैं मोबाइल के लिए साइट का अनुकूलन करता हूं और मैं 'खोज' को टेक्स्ट 'खोज' करने के लिए छोटा करना चाहता हूं। धन्यवाद

Answer 1

वास्तव में यह नहीं है कि सीएसएस क्या है।

सीएसएस आपकी सामग्री को स्टाइल करने के लिए है; एचटीएमएल वास्तविक सामग्री के लिए है।

यदि आपको HTML लोड होने के बाद सामग्री को संशोधित करने की आवश्यकता है, तो यही जावास्क्रिप्ट है।

तो आपके प्रश्न का वास्तविक उत्तर यह है: या तो सीधे HTML को संशोधित करें, या जावास्क्रिप्ट का उपयोग करें।

ऐसे में सामने की या एक तत्व :before और :after छद्म चयनकर्ताओं का उपयोग कर के पीछे अतिरिक्त पाठ जोड़ने के रूप में है कि सामग्री को प्रभावित कुछ बातें, सीएसएस के साथ कर सकते हैं, लेकिन यह है कि आप में मदद नहीं करेगा इस मामले में, और इस तरह के सामग्री परिवर्तन कार्य के लिए उपयोग नहीं किया जाना चाहिए जिसके बारे में आप बात कर रहे हैं।

वैसे, थोड़ा ऑफ-विषय, लेकिन यदि आप एक त्वरित पाठ के रूप में इनपुट फ़ील्ड मान का उपयोग कर रहे हैं, तो आप इसके बजाय HTML5 placeholder विशेषता को देखने पर विचार करना चाहेंगे। यह आपके प्रश्न को भी संबोधित नहीं करता है, लेकिन ऐसा लगता है कि यह ऐसा कुछ हो सकता है जो आपके लिए उपयोगी हो।

Answer 2

नहीं, सीएसएस input की विशेषता, या वास्तव में किसी भी तत्व की कोई विशेषता नहीं बदल सकता है।

Answer 3

यदि आप मान को बदलना चाहते हैं तो HTML "मान" विशेषता का उपयोग करें;

उदाहरण:

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

कि डिफ़ॉल्ट बदल जाएगा element:before भीतर मान "नया संदेश भेजे मेरे"

Answer 4

पार्टी के लिए देर हो चुकी है, लेकिन का उपयोग कर "सामग्री" विशेषता, "सबमिट करें" पूरा होगा क्या आप के रूप में देखा की जरूरत है http://www.w3schools.com/cssref/tryit.asp?filename=trycss_content_string

में मैं jQuery toggleClass के माध्यम से एक बटन सामग्री मूल्य में हेरफेर करने में सक्षम था, निम्नलिखित वर्गों के बीच स्विच:

.open_button:before{ 
    content:"open"; 
} 
.close_button:before{ 
    content: "close"; 
} 

मैं योग्यता को समझता हूं, लेकिन मुझे लगता है कि टॉगल क्लास एक लालित्य प्रदान करता है जो सीएसएस चाल को औचित्य देता है। अन्यथा कोई नेस्टेड सीएसएस स्विच फ़ंक्शंस के साथ टॉगल फ़ंक्शन का उपयोग करेगा। मैं व्यक्तिगत रूप से सोचता हूं कि नेस्टेड jQuery कार्यों से परहेज करना बेहतर दिख रहा है।

Answer 5

मेरे लिए समाधान

<button type="submit" class="mybutton" name="add"> 
    <span class="add">Add new</span> 
</button> 

था इसलिए सीएसएस होगा:

.mybutton:hover .add:after{content="0"} 

Answer 6

इतना आसान है, बस उदाहरण के लिए में टाइप करें:

button { 
 
color: red; 
 
font-family: sans-serif; 
 
}

वहाँ आप कर रहे हैं, बटन के साथ उदाहरण के लिए प्रस्तुत/रीसेट/आदि मूल्यों के साथ सभी आदानों ले ..

Answer 7

यह समाधान थोड़ा मुश्किल है,

लेकिन यह हमेशा मेरे लिए काम कर रहा है।

/*CSS Code*/ 
 

 
@media screen and (max-width: 768px) { 
 
.showondesktop { 
 
display: none !important; } 
 
} 
 

 
#showonmobile { 
 
    display:none; 
 
} 
 
@media screen and (max-width: 767px) { 
 
    #showonmobile { 
 
display:block; } 
 
}

<!--HTML Code-> 
 

 
<div class="showondesktop"> search this site </div> 
 

 
<div id="showonmobile"> search </div>

जब वेबसाइट मोबाइल से दौरा किया यह प्रदर्शित किया जाएगा "खोज", लेकिन जब डेस्कटॉप से ​​दौरा किया यह प्रदर्शित किया जाएगा "इस साइट खोज"।

छवि पूर्वावलोकन:

Output-Desktop-view.jpg

Output-Mobile-view.jpg