我正在创建一个WebApp,需要将各种化学品的百分比(如[HCl [Hydrochloric acid
],NaOH [Sodium Hydroxide
]等)作为用户输入。
所以我在HTML
:
<input type='text' value='' name='hcl' placeholder='Enter HCl%' />
这在大多数情况下都能正常工作,但现在我的客户要求输入化学品百分比如H 2 SO 4 ,SiO 2 等。
所以这就是我用过的东西:
<input type='text' placeholder='H<sub>2</sub>O' />
但没有成功。
所以现在我有一个问题:
我们如何格式化placeholders
html input
以显示格式化文字,就像这里提到的那样?
<小时/> 我知道这种情况的可能的解决方案是:
在label
之外使用<input>
,其中包含格式化的文字,如:
<label for='h2o'>Enter H<sub>2</sub>O% :</label><input id='h2o' type='text' />
Fiddle我现在正在使用这种方法;
但我仍然很想知道是否可以用占位符来完成它?
使用CSS还是CSS3?
如果不是那么使用JS?
欢迎任何建议。
希望专家会帮助我。在此先感谢:)!
答案 0 :(得分:19)
您可以尝试为subscript numbers使用Unicode字符(“下标代码”部分):
<input type="text" placeholder="H₂O" />
请参阅可用的子/上标表:http://en.wikipedia.org/wiki/Superscripts_and_Subscripts。
另一个选项(如果某些浏览器不支持必要的字符)您可以随时将背景图片与文字一起使用,并隐藏input:focus
上的背景。
答案 1 :(得分:1)
您可以使用css这样的
设置整个占位符的样式/*For Webkit browsers (Chrome, Safari) */
input::-webkit-input-placeholder {
/* Your style here e.g. font size, color etc */
}
/* For Mozilla Firefox */
input:-moz-placeholder {
/* Your style here e.g. font size, color etc */
}
您还可以使用以下选项设置部分样式:选择器之后和之前
//for wbkit browsers
::-webkit-input-placeholder:after {
content: '*';
}
::-webkit-input-placeholder:before {
content: '*';
}
//similarly for moz browsers
另一种方法是使用@dfsq
建议的UTF字符