中心HTML輸入文本字段佔位符

116

我使用下面的代碼，但它不工作：

CSS - >

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="[email protected]" style="text-align: center" name="email" /> 
    <!<input type="submit" value="submit" /> 
</form>

來源

2011-09-11 max_

你能告訴你的HTML？ – Will

不是一個真正的答案，但jQuery Mobile會這樣做，所以你可能想看看他們是如何實現它的。 – Evans

對我來說，當你擺脫'input.placeholder'位時，你的代碼就起作用了。將輸入內部的文本與中心對齊也可以對齊佔位符。 – IamGuest

219

如果你想只改變佔位風格

::-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; 
}

來源

2013-03-13 06:06:30

這適用於大多數輸入字段，但不適用於類型日期。你知道如何也使它工作日期？ –

input{ 
    text-align:center; 
}

是你所需要的。

Working example in FF6。這種方法似乎不是跨瀏覽器兼容的。

您以前的CSS試圖將具有「佔位符」類的輸入元素的文本居中。

來源

2011-09-11 21:44:50

我不想將佔位符以及輸入該字段的文本居中 –

是的。這就是這個例子所做的。佔位符_is_字段中的文本。 –

它在這個例子中不起作用。在示例中，佔位符左對齊。 –

可以爲接受元素的瀏覽器設置HTML5佔位符元素的樣式，但方式各不相同，如您在此處看到的：http://davidwalsh.name/html5-placeholder-css。我不相信text-align將被瀏覽器解釋。至少在Chrome上，此屬性將被忽略。但你總是可以改變其他東西，如color,font-size,font-family等我建議你重新考慮你的設計是否有可能消除這種中心行爲。

編輯

如果你真的想這個文本爲中心的，你總是可以使用一些jQuery代碼或插件來模擬佔位符的行爲。這是它的一個樣本：http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html。

這樣的風格將工作：

input.placeholder { 
    text-align: center; 
}

來源

2011-09-11 21:45:29

它工作正常，滿足我的需求，你應該檢查你的瀏覽器兼容性，我沒有問題，因爲我不在乎向後兼容性

.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; 
}

來源

2015-07-03 13:37:53 Denis

這個答案不是另一個答案的直接副本嗎？ – Anwar

@Anwar nah，你只是遇到Déjàvu – konzo

你可以這樣：

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

Working CodePen here

來源

2016-03-18 19:33:11

只有這對我有用。也許在HTML中添加的樣式具有更高的優先級或覆蓋所有其他樣式。 – Gokul

::-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; 
}

來源

2016-06-16 11:38:18

你可以嘗試這樣的：

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

來源

2017-10-15 13:45:18

中心HTML輸入文本字段佔位符

回答

相關問題