Jquery 占位符行为，包括选择的自定义颜色-这真的不可能吗？

我试图实现的是可用于文本输入和文本区域的占位符行为：占位符具有不同的颜色，如果用户输入值，然后将其删除，占位符值和占位符颜色都将重置

具体情况：我们有一个带有所谓占位符选项的选择项，其中该选项的文本为“选择处理”，选项的值为空。我希望使select元素按以下方式运行：

文档准备就绪时：所选选项为占位符选项，颜色为占位符颜色

在选择鼠标向下（或单击）时，“选择”和“选项”颜色都将更改为默认颜色-如果选定的选项不是占位符选项，它将保持默认颜色

如果重新选择占位符选项，则颜色将再次更改为占位符颜色

现在，在我看来，这是无法实现的。我尝试将适当的颜色更改绑定到mousedown、click和change事件中，所有可以想象的变化都是如此，但最终这一切都不起作用。发生的情况是：

在文档准备就绪时，这件事起作用了：选择颜色是占位符颜色

在第一次选择鼠标时，所有内容都将更改为默认颜色

在选择除占位符以外的值时，颜色仍然是默认颜色

在重新选择占位符时，该对象工作-颜色重置为占位符颜色

然后爆炸->5。在另一个“选择鼠标向下”按钮上，颜色不会更改为默认颜色

我尝试的代码（至少有一个变体）是（optionvals.color_sec是保存默认颜色的变量）：

---

非常感谢您的帮助。

好的，终于有可能了。快乐的一天！！ 通过将

select

和

option

都包含在jquery的样式中，可以达到预期的效果

jQuery(document).ready(function($) {

    $('select').css('color', '#ccc');
    $('option[value=""]').addClass('placeholder');

    $('select').on('mousedown', function() {

        $('option:not(.placeholder)', this).css('color', '#db0a5b');
        $('.placeholder', this).css('color', '#ccc');

    })

    $('select').on('change', function() {

        if ($(this).val() == '') {
            $(this).css('color', '#ccc');
        } else {
            $(this).css('color', '#db0a5b');
        }

    })

})

工作示例见

---

感谢guest271314为我指出了正确的方向。

您能创建一个stacksnippet来演示您试图实现的目标和您描述的问题吗？请参见“确定”，它现在在上可用，因此，您可以在此处看到，在友好的占位符情况下，选定值的颜色不会改变其“应有”的方式。鼠标向下时它不会变为绿色，并且所选选项也不是绿色。这就是我试图达到的目的，但我对这到底有多可能感到不安。

jQuery(document).ready(function($) {

    $('select').css('color', '#ccc');
    $('option[value=""]').addClass('placeholder');

    $('select').on('mousedown', function() {

        $('option:not(.placeholder)', this).css('color', '#db0a5b');
        $('.placeholder', this).css('color', '#ccc');

    })

    $('select').on('change', function() {

        if ($(this).val() == '') {
            $(this).css('color', '#ccc');
        } else {
            $(this).css('color', '#db0a5b');
        }

    })

})