क्या मैं इनपुट क्षेत्र पर छद्म तत्व के बाद: a: से पहले या का उपयोग कर सकता हूं?

Question

मैं :afterएक inputक्षेत्र पर CSS छद्म तत्व का उपयोग करने की कोशिश कर रहा हूं , लेकिन यह काम नहीं करता है। अगर मैं इसे एक के साथ उपयोग करता हूं span, तो यह ठीक है।

<style type="text/css">
.mystyle:after {content:url(smiley.gif);}
.mystyle {color:red;}
</style>

यह काम करता है ("बुआ!" और उससे पहले "कुछ और" के बाद स्माइली डालता है)

<span class="mystyle">buuu!</span>a some more

यह काम नहीं करता है - यह केवल कुछ लाल रंग में रंग देता है, लेकिन कोई स्माइली नहीं है।

<input class="mystyle" type="text" value="someValue">

मैं क्या गलत कर रहा हूं? क्या मुझे एक और छद्म चयनकर्ता का उपयोग करना चाहिए?

नोट: मैं spanअपने आसपास नहीं जोड़ सकता input, क्योंकि यह एक तृतीय-पक्ष नियंत्रण द्वारा उत्पन्न किया जा रहा है।

Comments

यदि आपका HTML पर पूर्ण नियंत्रण नहीं है, border-colorतो inputइसके बजाय बदलने का प्रयास करें । मुझे लगता है कि यह अधिक ध्यान देने योग्य है।

— ब्लेज़ेमॉन्गर

Answer 1

:afterऔर :beforeInternet Explorer 7 और उसके नीचे, किसी भी तत्व पर समर्थित नहीं हैं।

यह बदले हुए तत्वों जैसे फॉर्म एलिमेंट्स (इनपुट्स) और इमेज एलिमेंट्स पर इस्तेमाल करने के लिए भी नहीं है ।

दूसरे शब्दों में यह शुद्ध सीएसएस के साथ असंभव है ।

हालांकि अगर jquery का उपयोग आप उपयोग कर सकते हैं

$(".mystyle").after("add your smiley here");

API डॉक्स .after पर

जावास्क्रिप्ट के साथ अपनी सामग्री को जोड़ने के लिए। यह सभी ब्राउज़रों में काम करेगा।

Comments

एलेक्स, मैं IE8 और नवीनतम एफएफ का उपयोग कर रहा हूं, इसलिए IE7 एक मुद्दा नहीं है। मैं के किसी भी प्रलेखन के लिए कोचिंग कर रहा था: के बाद, लेकिन इसे खोजने में असमर्थ था। w3.org/TR/CSS2/generate.html में कहा गया है कि यह दस्तावेज़ के पेड़ में वर्तमान नोड के बाद डाला जाता है, इसलिए इसे दोनों मामलों में काम करना चाहिए।

— 14

जब तक आप अपने स्वयं के उपयोग के लिए पृष्ठ का निर्माण कर रहे हैं, तब तक इंटरनेट का एक बड़ा प्रतिशत उन ब्राउज़रों का उपयोग करता है। W3c कल्पना यह हाँ कहती है; लेकिन जैसा कि आप अच्छी तरह से जानते हैं कि ब्राउज़र कल्पना की अपनी व्याख्या को लागू करते हैं। उपयोग करना: इनपुट के बाद केवल ओपेरा 9+ में काम करेगा, लेकिन IE, FF, सफारी या क्रोम में कार्यान्वित नहीं किया जाता है क्योंकि वे आंतरिक रूप से DOM का निर्माण करते हैं - फिर से इसे शुद्ध CSS के साथ नहीं किया जा सकता है।

— एलेक्स

मुझे यकीन नहीं है कि अगर अप्रैल में ऐसा होता था, लेकिन वेबकिट :afterसामान्य रूप से समर्थन करता है , हालांकि यह :beforeया तो :afterइनपुट पर या तो समर्थन नहीं करता है।

— कोरीवर्ड

जहां तक ​​मैं W3C :afterऔर :beforeछद्म तत्वों को समझता हूं , उन्हें केवल कंटेनर तत्वों पर रखा जा सकता है। क्यों? क्योंकि उन्हें उस विशेष तत्व के अंदर जोड़ा जाता है । inputकंटेनर नहीं है। buttonउदाहरण के लिए इसलिए आप उन्हें डाल सकते हैं। उम्मीद के मुताबिक काम करता है। विशिष्टता वास्तव में कहती है: किसी तत्व के दस्तावेज़ ट्री सामग्री के पहले और बाद में यह स्पष्ट रूप से कंटेंट कहता है । तो एक तत्व एक कंटेनर होना चाहिए।

— रॉबर्ट कोरिटनिक 17

अगला उत्तर बेहतर है .. आईई 7 (जो परवाह करता है) और jQuery (बुरा विचार) के बारे में बात करने के बजाय वास्तविक कारण देता है

— रोवन

Answer 2

:beforeऔर :afterएक कंटेनर के अंदर प्रस्तुत करना

और <इनपुट> में अन्य तत्व नहीं हो सकते।

---

कंटेनर तत्वों पर छद्म तत्वों को केवल परिभाषित किया जा सकता है (या बेहतर कहा जाता है कि वे केवल समर्थित हैं)। क्योंकि वे जिस तरह से प्रदान किए जाते हैं वह कंटेनर के भीतर एक बाल तत्व के रूप में होता है। inputअन्य तत्वों को शामिल नहीं किया जा सकता इसलिए वे समर्थित नहीं हैं। एक buttonदूसरी ओर है कि पर भी एक ऐसा फ़ॉर्म तत्व, उन्हें समर्थन करता है, क्योंकि यह अन्य उप तत्वों की एक कंटेनर है।

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

W3C विनिर्देशन

यदि हम ध्यान से विनिर्देश को पढ़ते हैं तो यह वास्तव में कहता है कि वे एक तत्व के अंदर डाले गए हैं :

लेखक छद्म तत्वों के बाद: से पहले और के साथ उत्पन्न सामग्री की शैली और स्थान को निर्दिष्ट करते हैं। जैसा कि उनके नाम इंगित करते हैं, छद्म तत्वों के पहले और बाद में: तत्व के दस्तावेज पेड़ की सामग्री से पहले और बाद में सामग्री का स्थान निर्दिष्ट करते हैं। इन छद्म तत्वों के साथ संयोजन में 'सामग्री' संपत्ति निर्दिष्ट करती है कि क्या डाला गया है।

देख? एक तत्व दस्तावेज़ ट्री सामग्री । जैसा कि मैंने समझा कि यह एक कंटेनर के भीतर इसका मतलब है ।

Comments

+1 स्वीकृत उत्तर की तुलना में बहुत बेहतर है। मानक के स्पष्ट स्पष्टीकरण के लिए धन्यवाद। इतना के लिए [required]::before { content "*"; color: red; }: पी

— केविन पेनो

युक्ति: यदि आपको समस्या केवल प्रस्तुत इनपुट की तरह है <input type="submit" value="Send"/>, तो <button type="submit">Send</button>इसके बजाय उपयोग करें । प्रस्तुति समान है लेकिन <button>एक कंटेनर है और इस प्रकार समर्थन करता है :beforeऔर :after।

— फ्लू

किस बारे में <hr />? मैंने सोचा था कि यह एक कंटेनर तत्व नहीं था, लेकिन यह प्रस्तुत कर सकता है :afterऔर :before jsfiddle.net/Uf88j/1

— मृत्यु

@ डब्लॉक: यह वास्तव में दिलचस्प है। मैं कहूंगा कि यह किसी तरह की विसंगति है और मैं इसे क्रॉस ब्राउज़र या क्रॉस वर्जन पर काम करने पर भरोसा नहीं करूंगा ... एचआर एक कंटेनर तत्व नहीं है इसलिए इसे छद्म तत्वों की अनुमति नहीं देनी चाहिए। यहां तक ​​कि W3C मानक का कहना है कि यह बिना किसी सामग्री के अनुमति देता है। और अगर आप के लिए जाँच शून्य तत्व आप देख सकते हैं कि इन तत्वों को किसी भी परिस्थिति में कोई सामग्री नहीं चाहिए। छद्म तत्व ऐसे सामग्री हैं जो भविष्य के ब्राउज़र संस्करण को प्रदर्शित करने में विफल होने की उम्मीद करते हैं।

— रॉबर्ट कोरिटनिक

"" पहले और: एक कंटेनर के अंदर प्रस्तुत करने के बाद ": पहले और: छद्म तत्व आने के बाद " पहले और सामग्री के बाद "। कंटेनर की शुरुआत या अंत में "नहीं"। युक्ति में कंटेनर का उल्लेख नहीं है । जैसे टैग के साथ pऔर h1, सामग्री टैग के भीतर है, इसलिए पहले / बाद में भी अंदर दिखाई देती है। जैसे तत्वों के साथ inputऔर hr:: से पहले और बाद: अभी भी सामग्री के पहले या बाद में दिखाई देगा, लेकिन इसमें कोई कंटेनर शामिल नहीं है (विशेष रूप से input)। इनपुट: चेक किया गया: इससे पहले कि व्यापक रूप से css के माध्यम से चेकबॉक्स को चेक करने के लिए इस्तेमाल किया जाए।

— रेडली सस्टेयर

Answer 3

अजीब तरह से, यह कुछ प्रकार के इनपुट के साथ काम करता है। कम से कम क्रोम में,

<input type="checkbox" />

ठीक काम करता है, उसी के रूप में

<input type="radio" />

यह सिर्फ type=textऔर कुछ अन्य है जो काम नहीं करते हैं।

Comments

@ हंस, यह मेरे लिए क्रोमियम में काम करता था, लेकिन फ़ायरफ़ॉक्स में नहीं।

— kcpr

Answer 4

यहां एक और दृष्टिकोण है (यह मानते हुए कि आपके पास HTML का नियंत्रण है): <span></span>इनपुट के बाद एक खाली अधिकार जोड़ें , और सीएसएस का उपयोग करके लक्ष्य करेंinput.mystyle + span:after

.field_with_errors {
  display: inline;
  color: red;
}
.field_with_errors input+span:after {
  content: "*"
}

<div class="field_with_errors">Label:</div>
<div class="field_with_errors">
  <input type="text" /><span></span> 
</div>

मैं एंगुलरजेएस में इस दृष्टिकोण का उपयोग कर रहा हूं क्योंकि यह तत्वों .ng-invalidको <input>बनाने के लिए स्वचालित रूप से कक्षाओं को जोड़ देगा , और फॉर्म को, लेकिन नहीं <label>।

Comments

यह हॉवर क्रियाओं को जोड़ने की अनुमति देता है, जैसे input:hover+span:after{color: blue}:। वोट दें।

— krassowski

इस उत्तर के पास इतने कम उत्थान क्यों हैं? मुझे लगता है कि सैद्धांतिक ज्ञान महत्वपूर्ण है, लेकिन यह समस्या को हल करता है।

— जॉर्जफॉस्टर

समस्या को हल करने के लिए साथ जाने का अच्छा विकल्प।

— जेस्टर

Answer 5

:beforeऔर :afterएक कंटेनर के अंदर लागू होते हैं, जिसका अर्थ है कि आप इसे अंतिम टैग वाले तत्वों के लिए उपयोग कर सकते हैं।

यह स्व-समापन तत्वों के लिए लागू नहीं होता है।

साइड नोट पर, वे तत्व जो स्वयं-समापन (जैसे कि img / hr / input) होते हैं, उन्हें 'रेप्लिग्ड एलीमेंट्स' के रूप में भी जाना जाता है, क्योंकि उन्हें उनके संबंधित सामग्री से बदल दिया जाता है। एक बेहतर शब्द की कमी के लिए "बाहरी वस्तुएं"। एक बेहतर यहाँ पढ़ा

Comments

यह उत्तर सही है, संक्षिप्त है और महत्वपूर्ण संदर्भ प्रदान करता है। शीर्ष पर होना चाहिए, imo।

— पॉल

Answer 6

मैंने background-imageआवश्यक फ़ील्ड के लिए लाल बिंदु बनाने के लिए उपयोग किया ।

input[type="text"][required] {
  background-image: radial-gradient(red 15%, transparent 16%);
  background-size: 1em 1em;
  background-position: top right;
  background-repeat: no-repeat
}

कोडपेन पर देखें

Answer 7

आप एक इनपुट तत्व में एक छद्म तत्व नहीं रख सकते हैं, लेकिन छाया तत्व में, एक प्लेसहोल्डर की तरह रख सकते हैं!

input[type="text"] {   
  &::-webkit-input-placeholder {
    &:before {
      // your code
    }
  }
}

इसे अन्य ब्राउज़रों में काम करने के लिए, उपयोग करें :-moz-placeholder, ::-moz-placeholderऔर :-ms-input-placeholder विभिन्न चयनकर्ताओं में । चयनकर्ताओं को समूहीकृत नहीं कर सकता, क्योंकि यदि कोई ब्राउज़र नहीं पहचानता है तो चयनकर्ता पूरे विवरण को अमान्य कर देता है।

अद्यतन : उपरोक्त कोड केवल पूर्व-प्रोसेसर (एसएएसएस, लेस ...) के साथ काम करता है, पूर्व-प्रोसेसर के उपयोग के बिना:

input[type="text"]::-webkit-input-placeholder:before { // your code }

Comments

अच्छा! ध्यान दें कि प्लेसहोल्डर छद्म तत्व के पास सीमित संपत्ति का समर्थन है: रंग, पृष्ठभूमि, शब्द-रिक्ति, पत्र-रिक्ति, पाठ-सजावट, ऊर्ध्वाधर-संरेखित, पाठ-परिवर्तन, रेखा-ऊंचाई, पाठ-इंडेंट, अपारदर्शिता। देखें css-tricks.com/almanac/selectors/p/placeholder

— हेनरी

संकेत के लिए धन्यवाद। बस याद रखें कि छद्म तत्व के अंदर सब कुछ गायब हो जाएगा जब उपयोगकर्ता द्वारा इनपुट बॉक्स भरा जाएगा। यह एक UX समस्या है यदि आप सभी चाहते हैं, मेरी तरह, glyphicon-searchबिना टच मार्कअप प्रदर्शित कर रहा था ।

— डेवी लिमा

यह क्यों काम नहीं करता है पर कुछ संदर्भ: bugs.chromium.org/p/chromium/issues/detail?id=582301

— ओलिवर जोसेफ ऐश

Answer 8

छद्म तत्व जैसे :after, :beforeकेवल कंटेनर तत्वों के लिए होते हैं। एक ही स्थान पर शुरू और बंद करने वाले तत्व जैसे <input/>, <img>आदि कंटेनर तत्व नहीं हैं और इसलिए छद्म तत्व समर्थित नहीं हैं। एक बार जब आप कंटेनर तत्व के लिए एक छद्म तत्व लागू करते हैं जैसे <div>और यदि आप कोड का निरीक्षण करते हैं (छवि देखें) तो आप समझ सकते हैं कि मेरा क्या मतलब है। दरअसल छद्म तत्व कंटेनर तत्व के अंदर बनाया जाता है। <input>या के मामले में यह संभव नहीं है<img>

Answer 9

शुद्ध सीएसएस में एक काम कर समाधान:

ट्रिक को लगता है कि टेक्स्ट-फील्ड के बाद एक डोम एलिमेंट है।

/*
 * The trick is here:
 * this selector says "take the first dom element after
 * the input text (+) and set its before content to the
 * value (:before).
 */
input#myTextField + *:before {
  content: "👍";
} 

<input id="myTextField" class="mystyle" type="text" value="someValue" />
<!--
  There's maybe something after a input-text
  Does'nt matter what it is (*), I use it.
  -->
<span></span>

(*) सीमित समाधान, हालांकि:

• आपको आशा है कि निम्नलिखित डोम तत्व है,
• आपको आशा है कि कोई अन्य इनपुट फ़ील्ड आपके इनपुट फ़ील्ड का अनुसरण नहीं करेगी।

लेकिन ज्यादातर मामलों में, हम अपने कोड को जानते हैं इसलिए यह समाधान कुशल और 100% सीएसएस और 0% jQuery लगता है।

Comments

input#myTextField ~ span:before {बहुत बेहतर है, लेकिन स्पैन में वास्तव में अधिक स्पष्ट होने के लिए एक वर्ग होना चाहिए जैसे .tickया.icon

— Val

Answer 10

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

<style type="text/css">

form {position: relative; }
.mystyle:before {content:url(smiley.gif); width: 30px; height: 30px; position: absolute; }
.mystyle {color:red; width: 30px; height: 30px; z-index: 1; position: absolute; }
</style>

<form>
<input class="mystyle" type="text" value=""><span class="mystyle"></span>
</form>

Comments

+1 - यह समाधान अच्छी तरह से काम करता है यदि आप एक प्लगइन या फ्रेमवर्क का उपयोग कर रहे हैं जो स्वचालित रूप से सत्यापन कक्षाओं को तत्व में जोड़ता है, लेकिन मूल लेबल पर नहीं।

— ब्लेज़ेमॉन्गर

Answer 11

सबसे बड़ी गलतफहमी यहाँ शब्दों के अर्थ है beforeऔर after। वे स्वयं तत्व को संदर्भित नहीं करते हैं, लेकिन तत्व में सामग्री को। तो element:beforeसामग्री से पहले है, और सामग्री के element:afterबाद है, लेकिन दोनों अभी भी मूल तत्व के अंदर हैं।

inputतत्व सीएसएस ध्यान में रखते हुए कोई सामग्री नहीं है, और इसलिए कोई है :beforeया :afterछद्म सामग्री। यह कई अन्य शून्य या प्रतिस्थापित तत्वों का सच है।

तत्व के बाहर किसी भी छद्म तत्व का उल्लेख नहीं है ।

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

Comments

मुझे समझ में नहीं आ रहा है कि आपका क्या मतलब है लेकिन अगर मैं करता हूं, तो छद्म तत्व घंटा पर काम करते हैं? jsfiddle.net/demetriad/o49yn5hq

— क्रिस

@ क्रिस है कि मेरे लिए एक आश्चर्य के रूप में आता है, और खोज पर, कुछ अन्य लोगों के लिए। मुझे लगता है कि यह एक विचित्रता है। hrसीएसएस दृष्टिकोण से हमेशा अस्पष्ट रहा है, हालांकि आप रंग पर चर्चा करने में अधिक देखते हैं।

— मन्नंगो

Answer 12

सीएसएस 2.1 युक्ति में एक नोट के अनुसार , विनिर्देशन "बदले हुए तत्वों (जैसे HTML में IMG) के साथ: के पहले और बाद की बातचीत को पूरी तरह से परिभाषित नहीं करता है। इसे भविष्य के विनिर्देश में और अधिक विस्तार से परिभाषित किया जाएगा। ” हालांकि inputवास्तव में एक की जगह तत्व किसी भी अधिक, बुनियादी स्थिति नहीं बदली है नहीं है: के प्रभाव :beforeऔर :afterअनिर्दिष्ट में इस पर और आम तौर पर कोई प्रभाव नहीं है।

इसका समाधान यह है कि जिस समस्या को आप इस तरह से संबोधित करने का प्रयास कर रहे हैं, उसके लिए एक अलग तरीका खोजा जाए। एक टेक्स्ट इनपुट नियंत्रण में उत्पन्न सामग्री डालना बहुत भ्रामक होगा: उपयोगकर्ता के लिए, यह नियंत्रण में प्रारंभिक मूल्य का हिस्सा प्रतीत होगा, लेकिन इसे संशोधित नहीं किया जा सकता है - इसलिए यह शुरू होने पर कुछ मजबूर प्रतीत होगा नियंत्रण, लेकिन फिर भी इसे प्रपत्र डेटा के भाग के रूप में प्रस्तुत नहीं किया जाएगा।

Comments

यह एक टिप्पणी है, जवाब नहीं - बल्कि लंबी टिप्पणी, लेकिन फिर भी एक टिप्पणी।

— ब्लेज़मॉन्गर

@ ब्लेज़मॉन्जर, यह बिल्कुल स्पष्ट नहीं है कि सवाल क्या था, लेकिन किसी भी मामले में, यह उत्तर उसी मुद्दे को स्वीकार किए गए उत्तर के रूप में संबोधित करता है, लेकिन अधिक सही तरीके से। तत्वों के लिए उत्पन्न सामग्री का उपयोग करना असंभव नहीं है input, बस अनिर्दिष्ट और ब्राउज़र-आधारित है।

— जुक्का के। कोर्पेला

Answer 13

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

हालाँकि, सीएसएस वर्किंग ग्रुप स्पष्ट रूप से अनुमति दे रहा है ::beforeऔर ::afterमामले में inputहै appearance: none।

से https://lists.w3.org/Archives/Public/www-style/2016Mar/0190.html ,

सफारी और क्रोम दोनों अपने फॉर्म इनपुट पर छद्म तत्वों की अनुमति देते हैं। अन्य ब्राउज़र नहीं। हमने इसे हटाने पर ध्यान दिया, लेकिन उपयोग-काउंटर इसका उपयोग करते हुए पृष्ठों का ~ .07% रिकॉर्ड कर रहा है, जो कि हमारे अधिकतम निष्कासन की सीमा से 20 गुना अधिक है।

वास्तव में इनपुट पर छद्म तत्वों को निर्दिष्ट करने के लिए इनपुट की आंतरिक संरचना को कम से कम कुछ हद तक निर्दिष्ट करने की आवश्यकता होगी, जिसे हम अभी तक करने में कामयाब नहीं हुए हैं (और मुझे विश्वास नहीं है कि हम * * कर सकते हैं)। लेकिन बोरिस ने सुझाव दिया, एक बगथ्रेड में, यह उपस्थिति पर अनुमति देता है: कोई भी इनपुट - मूल रूप से उन्हें "दिवा-प्रतिस्थापित" तत्वों के बजाय केवल <div> s में बदल रहा है।

Answer 14

अगला प्रयास करें:

label[for="userName"] {
  position: relative;
}

label[for="userName"]::after {
  content: '[after]';
  width: 22px;
  height: 22px;
  display: inline-block;
  position: absolute;
  right: -30px;
}

<label for="userName">
	Name: 
	<input type="text" name="userName" id="userName">
	</label>

Answer 15

छद्म तत्व के पहले या बाद का उपयोग करने के लिए आपके पास इनपुट के आसपास कुछ प्रकार के आवरण होने चाहिए। यहाँ एक फील है जो इनपुट के रैपर डिव पर पहले है और फिर इनपुट के अंदर पहले रखता है - या कम से कम यह ऐसा दिखता है। जाहिर है, यह एक काम के आसपास है लेकिन एक चुटकी में प्रभावी है और उत्तरदायी होने के लिए खुद को उधार देता है। यदि आप कुछ अन्य सामग्री डालने की आवश्यकता है, तो आप इसे आसानी से बना सकते हैं।

वर्किंग फिडल

एक छद्म तत्व के रूप में एक इनपुट के अंदर डॉलर का संकेत: http://jsfiddle.net/kapunahele/ose4r8uj1//

HTML:

<div class="test">
    <input type="text"></input>
</div>

सीएसएस:

input {
    margin: 3em;
    padding-left: 2em;
    padding-top: 1em;
    padding-bottom: 1em;
    width:20%; 
}


.test {
    position: relative;
    background-color: #dedede;
    display: inline;
}

.test:before {
    content: '$';
    position: absolute;
    top: 0;
    left: 40px;
    z-index: 1;
}

Comments

अच्छी चाल है, लेकिन आप इनपुट को "जारी" रखने के लिए स्टाइल से बना सकते हैं। इस फिडेल को देखें jsfiddle.net/ose4r8uj/31 लेकिन आप बूटस्ट्रैप का उपयोग करके भी इसे आसान बना सकते हैं: getbootstrap.com/css/#forms-control-validation "वैकल्पिक आइकन के साथ" भाग के लिए देखें। हालांकि, इसका मूल प्रश्न से कोई लेना-देना नहीं है।

— विक्टर Ivens

FYI के लिए अच्छा नहीं है: फोकस,: होवर, आदि इनपुट के क्योंकि आप मूल तत्व को लक्षित नहीं कर सकते हैं

— जोर्डनब

Answer 16

यदि आप किसी इनपुट तत्व को पहले: और बाद में: शैली में ढालने की कोशिश कर रहे हैं, तो आप अपने सीएसएस स्टैक में अन्य स्पैन, डिव या यहां तक ​​कि एक तत्व के प्रभावों की नकल करने की कोशिश कर रहे हैं ।

जैसा कि रॉबर्ट कोरिटनिक का उत्तर बताता है: पहले और बाद में केवल कंटेनर तत्वों पर लागू किया जा सकता है और इनपुट तत्व कंटेनर नहीं हैं।

HOWEVER, HTML 5 ने बटन तत्व को पेश किया जो एक कंटेनर है और एक इनपुट की तरह व्यवहार करता है [type = "submit | reset"] तत्व।

    <style>
    .happy:after { content:url(smiley.gif); }
    </style>

    <form>
    <!-- won't work -->
    <input class="happy" type="submit" value="Submit" />

    <!-- works -->
    <button class="happy">Submit</button>
    </form>

Comments

HTML 4 ने वास्तव में <बटन> तत्व पेश किया।

— मिस्टर लिस्टर

Answer 17

सारांश

यह साथ काम नहीं करता है <input type="button">, लेकिन यह ठीक काम करता है <input type="checkbox">।

फिडल : http://jsfiddle.net/gb2wY/50/

HTML :

<p class="submit">
    <input id="submit-button" type="submit" value="Post">
    <br><br>
    <input id="submit-cb" type="checkbox" checked>
</p>

सीएसएस :

#submit-button::before,
#submit-cb::before {
    content: ' ';
    background: transparent;
    border: 3px solid crimson;
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: -3px -3px;
}

Answer 18

:beforeऔर :afterकेवल उन नोड्स के लिए काम करता है जिनमें बच्चे के नोड्स हो सकते हैं क्योंकि वे पहले या आखिरी नोड के रूप में एक नया नोड सम्मिलित करते हैं।

Answer 19

मैंने पाया कि आप इसे इस तरह से कर सकते हैं:

.submit .btn input
{
   padding:11px 28px 12px 14px;
   background:#004990;
   border:none;
    color:#fff;
}

 .submit .btn
 {
     border:none;
     color:#fff;
     font-family: 'Open Sans', sans-serif;
     font-size:1em;
     min-width:96px;
     display:inline-block;
     position:relative;
 }

.submit .btn:after
{
    content:">";
    width:6px;
    height:17px;
    position:absolute;
    right:36px;
    color:#fff;
    top:7px;
}

<div class="submit">
  <div class="btn">
     <input value="Send" type="submit" />
  </div>
</div>

आपको एक दिव्य माता-पिता की आवश्यकता होती है जो पैडिंग और: के बाद लेता है। पहले माता-पिता को रिश्तेदार होना चाहिए और दूसरा तलाक निरपेक्ष होना चाहिए ताकि आप बाद की स्थिति निर्धारित कर सकें।

Answer 20

मेरे पास इसके बजाय एक और विचार है:

<div>
<input type="text"></input>text can be entered here</div>

Comments

प्रश्न के लेखक ने स्पष्ट रूप से कहा कि वे HTML मार्कअप को बदलने में सक्षम नहीं हैं। इस जवाब का कोई मतलब नहीं है। संभवतः इसे संपादित @Morpheus के बजाय डाउनवोट किया जाना चाहिए था।

— शाम