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

【问题标题】：Placeholder behaviour incl. custom color for select - is this really impossible?占位符行为包括。选择的自定义颜色 - 这真的不可能吗？
【发布时间】：2017-12-18 23:34:45
【问题描述】：

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

具体情况：我们有一个带有所谓占位符选项的选择项，其中该选项的文本是“选择治疗”，选项的值为空。我想让 select 元素的行为方式如下：

ON DOCUMENT READY：所选选项为占位符选项，颜色为占位符颜色；
在 SELECT MOUSEDOWN（或 CLICK）上，选择和选项颜色都更改为默认颜色 - 如果所选选项不是占位符选项，它仍然是默认颜色；
如果重新选择占位符选项，颜色将再次更改为占位符颜色。

现在，据我所知，这是无法实现的。我试图在所有可以想象的变化中将适当的颜色更改绑定到鼠标按下、单击和更改事件，但最终还是不行。会发生什么：

在 DOCUMENT READY 上一切正常：选择颜色是占位符颜色。
在 FIRST SELECT MOUSEDOWN 时，一切正常，一切都变为默认颜色。
在选择 PLACEHOLDER 以外的值时，事情会起作用，颜色仍然是默认颜色。
在重新选择占位符时，事情起作用了 - 颜色重置为占位符颜色。

然后 BOOM -> 5. 在另一个 SELECT MOUSEDOWN 上，颜色不会更改为默认颜色。

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

// Select field type color manipulation
$('.noosa-contact-form select').css('color', '#ccc');

$('.noosa-contact-form select').on( 'change', function() {

    $this = $(this);

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

} )

非常感谢任何帮助。

【问题讨论】：

您能否创建一个 stacksn-p 来展示您想要实现的目标以及您所描述的问题？见stackoverflow.com/help/mcve
当然，它现在在jsfiddle.net/jpsafgqz/6 上可用所以，您可以在此处看到所选值的颜色不会改变它在友好占位符情况下“应该”的方式。它不会在鼠标按下时变为绿色，并且所选选项再次不是绿色。这就是我尝试/尝试实现的目标，但我对这真的有多大可能有不好的感觉。

标签： jquery select colors placeholder

【解决方案1】：

好的，终于出来了，这是可能的。快乐的一天！！可以通过在 jquery 样式中同时涉及 select 和 option 来实现所需的效果。

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');
        }

    })

})

工作示例见https://jsfiddle.net/jpsafgqz/17/

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

【讨论】：