Question

我注册了一个带有html选择菜单的网站，可以从该菜单中选择叫Mr.或Mrs的蜜蜂。文本颜色为灰色，并且我希望在选择其中一种选项后将其变为黑色，就像发生这种情况一样带有通常的输入字段。

我已经尝试使用.anrede：focus（适用于输入字段），但是在选择了下一个输入字段后，它再次变为灰色

            <div>
                <select id="anrede" class="anrede">
                    <option hidden>Anrede</option>
                    <option value="f">Frau</option>
                    <option value="m">Herr</option>
                </select>
            </div>
            <!--Vorname-->
            <div><input id="vname" type="text" class="input" placeholder="Vorname"></div>

.input{
border: 2px solid #AD974F;
border-radius: 4px;
margin-top: 15px;

}

.input:focus{
border: 2px solid #8E793E;

如果可能的话，我想用CSS解决它，但是我还找不到任何解决方案。

Answer 1

您可以简单地将jQuery添加到您的项目中，如下所示：

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/
     jquery/3.4.1/jquery.min.js"></script>
</head>

然后只使用HTML文件底部<script></script>标记内部的以下代码段即可。

如果您要为所选的每个选项完成额外的文本颜色更改，则还需要为每个选项提供一个“ id”。

$( document ).ready(function() {
   $("#anrede").change(function(){
    // the code in here will be called if an option is selected

    // This line will change the options text-color to be whatever color you 
    // provide
    $(this).find('option').css('text-color', '#8E793E');
   });
});

奖金：

$( document ).ready(function() {
  $("#anrede").change(function(){
  //If you want to change the color based on what option was selected you can 
  get them based on their id's and handle them accordingly 
  // EX: 
  var id = $(this).find("option:selected").attr("id");

  switch (id){
   case "Anrede":
   // Change the color for the Anrede option
   $(this).find(id).css('text-color', '#8E793E');
   break;
   .... // Add cases for each possible ID if needed
  }
 });
});

使用CSS选择选择菜单的一个选项后，如何更改文本颜色？

1 个答案: