Question

我想知道是否可以设置输入框的值... such为：

<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">

但它不会渲染span元素。有什么建议吗？

Answer 1

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

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

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

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

请注意，占位符仅适用于支持HTML5和占位符属性的浏览器。如果你想要旧版浏览器的兼容性并且不介意使用一些JQuery，你可以使用像JQuery Watermark这样的JQuery插件。

但是，您不能将span元素放在value标记的input内。

Answer 2

我认为使用带div的contentEditable属性是非常好的。示例：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中的纯文本值放入输入值。谢谢penartur。

Answer 3

不，这是不可能的。

请勿尝试滥用value属性为表单控件提供<label>。（并且不要尝试将rel属性用于除链接之外的任何其他内容。）

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

将输入和标签包装在容器（例如div）中
在其上设置position: relative以使其成为包含块
将输入绝对放在标签
使输入的背景颜色透明
根据需要添加任何其他样式

Answer 4

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

e.g。 <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>">不是。

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

Answer 5

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

Answer 6

是的，有可能..用这样的选择器尝试一下：

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

Answer 7

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

是否可以设置输入文本的值？

7 个答案: