这里有两种类型的占位符，可重新选择和隐藏：
演示：http://jsfiddle.net/lachlan/FuNmc/
可重新选择的占位符：

<select>
    <option value="" selected>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

字符串
隐藏占位符：

<select class="empty">
    <option value="" selected disabled>Please select</option>
    <option value="1">Item 1</option>
    <option value="2">Item 2</option>
    <option value="3">Item 3</option>
</select>

型
CSS改变第一个元素的颜色：

select option { color: black; }
select option:first-child { color: grey; }
select.empty { color: grey; }
/* Hidden placeholder */
select option[disabled]:first-child { display: none; }

型
还有一个小jQuery来切换选择后的字体颜色：

// Applies to all select boxes that have no value for their first option
$("select:has(option[value=]:first-child)").on('change', function() {
    $(this).toggleClass("empty", $.inArray($(this).val(), ['', null]) >= 0);
}).trigger('change');

型
灵感来源：
https://stackoverflow.com/a/5805194/1196148-重新选择占位符
https://stackoverflow.com/a/8442831/1196148-隐藏占位符

我已经按照@Truth的建议构建了一个简单的演示：http://jsfiddle.net/6QnXF/

(function($){
    $('#myAwesomeSelect').change(function(){
       if( !$(this).data('removedPlaceHolder'))
       {
          $(this).find('option:first').remove();
          $(this).data('removedPlaceHolder', true); 
       }
    });
})(jQuery);

字符串
我希望这对你有用。

据我所知，没有办法单独使用HTML（尽管这会很好）。你可以用一个选中的选项来伪造它（我知道你不想要它，但这可能是唯一的方法）。选择另一个选项后，可以将其删除。

**Here's a working example of what I describe.**第一个字符

我的猜测是，您将不得不为选择框构建自己的解决方案。类似于一系列充当选项的div，单击这些选项时会显示它们的值并将其插入到隐藏的输入字段中。

试试这个：在css中添加这个（样式表）：

select:required:invalid {
 color: #c4c4c4;
}
option[value=""][disabled] {
 display: none;
}
option {
 color: #232423;
}

字符串
HTML：

<select required>
 <option value="" disabled selected>Select a color</option>
 <option value="red">Red</option>
 <option value="green">Green</option>

型