Html 是否可以为输入文本的值设置样式？

is it possible to style a value of an input text?

提问by markzzz

I'd like to know if is possible to style a value of an input box... suchas :

我想知道是否可以为输入框的值设置样式...例如：

<input class="textBox" type="text" rel="Inserisci il <span style=" value="Inserisci il <span style='color:#c83243;'>titolo</span> per l'URL personalizzato" name="ctl00$InsertDati1$txtTitolo">????????????????????????????

but it doesnt render the span element. Any suggestions?

但它不呈现跨度元素。有什么建议？

回答by Sagar Patil

You can style the content within an input box. For eg:

您可以设置输入框中的内容样式。例如：

input{
    color:#ff0000;
    font: 1em/1.25em Arial, Helvetica, sans-serif;
}

If you want to use placeholder content on the other hand, you can add a 'placeholder' attribute on the input tag like so:

另一方面，如果您想使用占位符内容，您可以在输入标签上添加一个“占位符”属性，如下所示：

<input type="text" class="textbox" placeholder='Title' />

Note that placeholders only work in browsers that support HTML5 and the placeholder attribute. If you want compatibility for older browsers and dont mind using some JQuery, you can use a JQuery plugin like JQuery Watermark.

请注意，占位符仅适用于支持 HTML5 和占位符属性的浏览器。如果您希望与旧浏览器兼容并且不介意使用某些 JQuery，则可以使用 JQuery 插件，例如JQuery Watermark。

You can't however, place span elements within the valueof an inputtag.

但是你不能，内地方span元素value的的input标签。

回答by Petr Hajek

Using contentEditable attribute with div is very nice I think. Example: https://jsfiddle.net/scjnwrnf/<div contenteditable="true">This is a paragraph.<span style = "color:red"> It is editable. </span> Try to change this text.</div>Then you can hide input element and put plain text value from div into input value via JavaScript. Thanks penartur.

我认为将 contentEditable 属性与 div 一起使用非常好。示例：https: //jsfiddle.net/scjnwrnf/<div contenteditable="true">This is a paragraph.<span style = "color:red"> It is editable. </span> Try to change this text.</div>然后您可以隐藏输入元素并通过JavaScript将div中的纯文本值放入输入值中。谢谢佩纳图尔。

回答by Quentin

No, it isn't possible.

不，这是不可能的。

Don't try to abuse the valueattribute to provide a <label>for form controls. (And don't try to use the relattribute for anything other than relationships on links for that matter).

不要试图滥用该value属性来提供<label>表单控件。（并且不要尝试将该rel属性用于除链接上的关系以外的任何其他内容）。

Instead, use a real <label>. If you really want it to appear where the user is going to be typing, then:

相反，使用真正的<label>. 如果您真的希望它出现在用户将要输入的位置，那么：

1. Wrap the input and label in a container (e.g. a div)
2. Set position: relativeon it to make it a containing block
3. Absolutely position the input on top of the label
4. Make the background colour of the input transparent
5. Add any other styling as desired

1. 将输入和标签包装在容器中（例如 div）
2. 设置position: relative它以使其成为包含块
3. 将输入绝对定位在标签的顶部
4. 使输入的背景颜色透明
5. 根据需要添加任何其他样式

回答by penartur

You can style the entire input box content, but cannot apply different styles to different parts of its content.

您可以设置整个输入框内容的样式，但不能对其内容的不同部分应用不同的样式。

e.g. <input style="color:red" value="all text is red"/>is possible, but <input value="<span style='color:red'>this text is red</span>, and <span style='color:red'>this text is red</span>">is not.

例如<input style="color:red" value="all text is red"/>是可能的，但<input value="<span style='color:red'>this text is red</span>, and <span style='color:red'>this text is red</span>">不是。

Try to look at multi-line boxes with contenteditable feature instead.

尝试查看具有 contenteditable 功能的多行框。

回答by mhuerta

Yep, it's possible.. try it with a selector like this:

是的，这是可能的.. 尝试使用这样的选择器：

input[value^="Your Value"] {
    Your styles
}

回答by SupRob

One thing you can do is style the text with the input selector then style it different input:focus. So the placeholder text will look different than the text someone types.

您可以做的一件事是使用输入选择器设置文本样式，然后设置不同的 input:focus 样式。因此占位符文本看起来与某人键入的文本不同。

回答by stiepan

Try using Twitter's bootstrap package - http://twitter.github.com/bootstrap- you can easily achieve corner radius, inset shadows, nice hover and focus effects... You can also download "less-css" version - really flexible tool - but it's for more experienced users :)

尝试使用 Twitter 的 bootstrap 包 - http://twitter.github.com/bootstrap- 您可以轻松实现圆角半径、插入阴影、漂亮的悬停和焦点效果...您还可以下载“less-css”版本 - 非常灵活的工具- 但它适用于更有经验的用户:)