如何在 HTML 和 CSS 中更改 select 的占位符选项？

Question

我正在尝试更改值为“”的选择选项的颜色。

这是我的 HTML：

<select id="kategorija" name="kategorija"></select>

这是我的 CSS：

select {
    border-radius: 5px;
    height: 45px;
    background-color: #f6f6f6;
    border-width: 0;
    text-indent: 10px; 
}

select:invalid {
  color: green;
}

我已经尝试了在这里找到的多个选项，但似乎都没有用。

此外，有没有办法在选择选项的箭头周围放置填充？

Answer 1

也许你的意思是这个
访问：https://www.w3schools.com/cssref/sel_invalid.php

<!DOCTYPE html>
<html>
<head>
<style>
input:invalid {
  border: 2px solid red;
}
</style>
</head>
<body>

<h1>Demo of the :invalid selector</h1>

<input type="email" value="supportEmail"><br/><br/>
<input type="email" value="[email protected]">
<p>Try typing a legal e-mail address, to see the styling disappear.</p>
</body>
</html>

Answer 2

我们不是在这里设计

<option>

的样式，我们有条件地设计

<select>

本身。如果在没有显示文本时将文本颜色设置为绿色，您将看不到任何变化。建议您在选择为

:invalid

时开始设计边框样式，然后从那里开始。请记住，要使其正常工作，选择需要

required

属性才能将空白选项视为无效。

select {
  border-radius: 5px;
  background-color: #f6f6f6;
  border: 2px solid #e6e6e6;
  padding: 6px 8px;
}

select:invalid {
  border: 2px dashed red;
}

/* This is just to make the validation more visible.
   Don't disable all focus styles in a production application. */
select:focus {
  outline: none;
}

<select required>
  <option></option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
<select required>
  <option></option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
<select required>
  <option></option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>

如何在 HTML 和 CSS 中更改 select 的占位符选项？

问题描述投票：0回答：2

2个回答

最新问题

如何在 HTML 和 CSS 中更改 select 的占位符选项？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2