是否可以将样式应用于表单字段的值？答案

【问题标题】：Is it possible to apply styles to the value of a form field?是否可以将样式应用于表单字段的值？
【发布时间】：2011-09-30 19:57:54
【问题描述】：

我有一个表单输入标签，其中一些文本分配给它的 value 属性：

<input type="text" name="firstName" value="First Name*" />

由于这是必填字段，如何将“名字*”字符串末尾的星号设置为红色？这甚至可能吗？...您如何设置预填充表单字段的值？

谢谢。

【问题讨论】：

您应该使用placeholder attribute 作为占位符，而不是value。

标签： html css

【解决方案1】：

我认为你让这件事变得更复杂了。可能有一种使用 javascript 或 jquery 的方法，但我认为这太过分了。

我只是把它放在盒子外面，然后在<span> 标签内设置样式。

【讨论】：

【解决方案2】：

我认为您不能将一个字符设置为红色，但您可以将整个字符串设置为红色。

我可能会做的是在输入框外设置星号并像这样设置它

<input ...value="FirstName"><span style="color: #FF0000;">*</span>

【讨论】：

【解决方案3】：

不，这是不可能的。你必须伪造它。

不过，这就是<label>s 的用途！！

<label>First Name* <input name=firstName required></label>

【讨论】：

【解决方案4】：

即使有可能，这也不是一个好习惯。数据应始终与表示分离。除了您真正需要发布的数据之外，您不需要其他任何东西。

最好使用 jQuery 解决方案，如果出现错误，只需将一个类分配给 post 上的输入字段，例如使输入内的文本变为红色，在输入框周围绘制红色边框等。

【讨论】：

【解决方案5】：

如果您使用的是 asp .net，为什么不直接使用必填字段验证器控件并让它为您完成工作。

【讨论】：

【解决方案6】：

我建议不要在字段中添加 *，而是通过 CSS 和 jQuery/JavaScript 修改元素的样式来表示必填字段。

工作示例：http://jsfiddle.net/wstGQ/

CSS：

input {
 color: #ccc;   
}
.required {
 color: #FF0000;
 border: 1px solid #FF0000;   
}

jQuery:

$('input').focus(function(){
    var obj= $(this);
    var oldVal = obj.val();

    obj.blur(function(){
        if(obj.val() == oldVal){
         obj.val('Please enter a valid option').addClass('required'); 
        }else{
         obj.removeClass('required');   
        }
    });
});

【讨论】：