केंद्र HTML इनपुट टेक्स्ट फ़ील्ड प्लेसहोल्डर

Question

मैं HTML फॉर्म में इनपुट फ़ील्ड के प्लेसहोल्डर के संरेखण को कैसे केंद्र कर सकता हूं?

मैं निम्नलिखित कोड का उपयोग कर रहा हूं, लेकिन यह काम नहीं करता है:

सीएसएस ->

input.placeholder {
    text-align: center;
}
.emailField {
    top:413px;
    right:290px;
    width: 355px;
    height: 30px;
    position: absolute;
    border: none;
    font-size: 17;
    text-align: center;
}

HTML ->

<form action="" method="POST">
    <input type="text" class="emailField" placeholder="[e-mail]" style="text-align: center" name="email" />
    <!<input type="submit" value="submit" />  
</form>

Comments

वास्तव में एक उत्तर नहीं है, लेकिन jQuery मोबाइल ऐसा करता है ताकि आप यह देखना चाहें कि वे इसे कैसे प्राप्त करते हैं।

— Evanss

मेरे लिए, जब आप input.placeholderबिट से छुटकारा पा लेते हैं तो आपका कोड काम करता है । केंद्र के इनपुट के अंदर पाठ संरेखित करने के साथ ही प्लेसहोल्डर को भी संरेखित करता है।

— कैनालाइड जूल

Answer 1

यदि आप केवल प्लेसहोल्डर शैली को बदलना चाहते हैं

::-webkit-input-placeholder {
   text-align: center;
}

:-moz-placeholder { /* Firefox 18- */
   text-align: center;  
}

::-moz-placeholder {  /* Firefox 19+ */
   text-align: center;  
}

:-ms-input-placeholder {  
   text-align: center; 
}

Comments

यह अधिकांश इनपुट फ़ील्ड के लिए ठीक काम करता है, लेकिन टाइप की तारीख के लिए नहीं। क्या आप जानते हैं कि यह कैसे काम करता है?

— कॉर्नेलियस पार्किन

Answer 2

input{
   text-align:center;
}

आपको जो चाहिए वह यह है।

काम करने का उदाहरणएफएफ 6 में । यह विधि क्रॉस-ब्राउज़र संगत नहीं लगती है।

आपका पिछला CSS एक इनपुट तत्व के पाठ को केंद्र में रखने का प्रयास कर रहा था जिसमें "प्लेसहोल्डर" का एक वर्ग था।

Comments

मैं प्लेसहोल्डर के साथ-साथ पाठ को क्षेत्र में प्रवेश नहीं करना चाहता था

— 21_48 पर max_

हाँ। यह वही है जो यह उदाहरण देता है। प्लेसहोल्डर है फ़ील्ड में लेख।

— जेमी डिक्सन

यह उदाहरण में काम नहीं करता है। उदाहरण में, प्लेसहोल्डर को संरेखित किया जाता है।

— 21

खबरदार, यदि आप लाइब्रेरी जैसे बूटस्ट्रैप या सिमेंटिक यूआई का उपयोग कर रहे हैं, तो आपको <input type="text" placeholder="Search..." style="text-align: right;">इसे काम करने के लिए स्टाइल इनलाइन यानी जोड़ना होगा । या important!यदि आप बाहरी फ़ाइलों का उपयोग कर रहे हैं तो अपने CSS नियम में जोड़ें ।

— बहदाद

ऐसा लगता है कि आपको जो समस्या हो रही है वह अधिकतम_ ब्राउज़र संगतता का एक मुद्दा है। यह सफारी को छोड़कर अधिकांश प्रमुख ब्राउज़रों में ठीक काम करता है।

— २१'१ 'कैनाईडाईड

Answer 3

HTML5 प्लेसहोल्डर तत्व उन ब्राउज़र के लिए स्टाइल किया जा सकता है जो तत्व को स्वीकार करते हैं, लेकिन अलग-अलग तरीकों से, जैसा कि आप यहां देख सकते हैं: http://davidwalsh.name/html5-placeholder-css ।

लेकिन मुझे विश्वास नहीं है कि text-alignब्राउज़रों द्वारा व्याख्या की जाएगी। कम से कम क्रोम पर, इस विशेषता को अनदेखा किया जाता है। लेकिन आप हमेशा अन्य बातों को बदल सकते हैं, जैसे color, font-size,font-family आदि मैं तुम्हें कि क्या संभव इस केंद्र व्यवहार निकालने के लिए अपनी डिजाइन पुनर्विचार सुझाव देते हैं।

संपादित करें

यदि आप वास्तव में इस पाठ को केन्द्रित करना चाहते हैं, तो आप हमेशा प्लेसहोल्डर व्यवहार का अनुकरण करने के लिए कुछ jQuery कोड या प्लगइन का उपयोग कर सकते हैं। इसका एक नमूना यहां है: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html ।

इस तरह से शैली काम करेगी:

input.placeholder {
    text-align: center;
}

Answer 4

आप इस तरह बना सकते हैं:

    <center>
    <form action="" method="POST">
    <input type="text" class="emailField" placeholder="[e-mail]" style="text-align: center" name="email" />
    <input type="submit" value="submit" />  
</form>
    </center>

यहां काम कर रहे CodePen

Comments

केवल यह मेरे लिए काम कर रहा है। हो सकता है कि HTML में जोड़ी गई शैलियों को अन्य सभी शैलियों को अधिक प्राथमिकता दी जाए या ओवरराइडिंग की जाए।

— गोकुल

Answer 5

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

.inputclass::-webkit-input-placeholder {
text-align: center;
}
.inputclass:-moz-placeholder { /* Firefox 18- */
text-align: center;  
}
.inputclass::-moz-placeholder {  /* Firefox 19+ */
text-align: center;  
}
.inputclass:-ms-input-placeholder {  
text-align: center; 
}

Comments

क्या यह उत्तर किसी अन्य उत्तर की सीधी प्रति नहीं है?

— अनवर

Answer 6

आप प्लेसहोल्डर के लिए सीएसएस लिखने के लिए भी इस तरह का उपयोग कर सकते हैं

input::placeholder{
   text-align: center;
}

Answer 7

आप इस तरह की कोशिश कर सकते हैं:

input[placeholder] {
   text-align: center;
}

Answer 8

::-webkit-input-placeholder {
 font-size: 14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
:-moz-placeholder { 
 font-size:14px;
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}
::-moz-placeholder { 
 font-size: 14px;
 color: #d0cdfa; 
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
} 
:-ms-input-placeholder { 
 font-size: 14px; 
 color: #d0cdfa;
 text-transform: uppercase;
 text-align: center;
 font-weight: bold;
}

Answer 9

नीचे दिए गए कोड स्निपेट का उपयोग करके, आप अपने इनपुट के अंदर प्लेसहोल्डर का चयन कर रहे हैं, और अंदर रखा कोई भी कोड केवल प्लेसहोल्डर को प्रभावित करेगा।

input::-webkit-input-placeholder {
      text-align: center
}

Comments

स्वीकृत उत्तर की तुलना में यह उत्तर कुछ अलग प्रदान नहीं करता है ।

— एंटोन मेन्शोव

यह उत्तर संकेत देता है कि सभी प्लेसहोल्डर्स के विपरीत केवल एक विशिष्ट तत्व के प्लेसहोल्डर को कैसे बदलना है। जैसे .foo::-webkit-input-placeholder { … }।

— हेनरिक एन

Answer 10

आप नीचे की तरह एक वर्ग में सेट का उपयोग कर सकते हैं और इनपुट क्लास
सीएसएस पर सेट कर सकते हैं :

 .place-holder-center::placeholder {
        text-align: center;
    }

HTML:

<input type="text" class="place-holder-center">