select 下拉默认选中项的颜色设置

最新推荐文章于 2025-06-21 15:43:24 发布

翻译最新推荐文章于 2025-06-21 15:43:24 发布 · 1.3w 阅读

文章标签：

#select是否选中

js 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一种使用CSS和JavaScript来美化HTML下拉框样式的方法，并通过JS实现对下拉框选项的选择进行有效性检查，确保用户在未选择有效选项时能够得到反馈。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>

   select:invalid { color: red; }

   option{
   	color: #000;
   }
</style>

// 注意required必须设置，要不然颜色不生效
<select required>
	<option value="" disabled selected hidden>Select your option</option>
	<option value="M">Male</option>
	<option value="F">Female</option>
</select>
<button>点击</button>

<script>
// 判断select是否有值
$("button").on('click',function(){
	var value=$("select").val()
	if(value==null){
		console.log(1)
	}else{
		console.log(2)
	}
})     
</script>