php - CSS有一个列表框，我需要它选择不将文本颜色更改为事件或不事件，焦点或未聚焦。点击添加，点击添加

我有一个列表框，我需要它选择不将文本颜色更改为活动或不活动，焦点或未焦点。其单击添加，单击添加。在此文本上，选中的文本保持白色，单击列表框后变为黑色。我需要它保持红色，单击时仅改变背景，以显示它被单击，然后回到黑色。（在询问之前已经花了几天的时间，重写了这么多次后，代码中可能会出现错误。）

<select onclick="" class="sometext" name="sometext" size="5">
    <?php
        $sql = "select * FROM mom WHERE type='feedme'";
        foreach ($dblsm->query($sql) as $row){

            echo "<option value=$row[id]>$row[title]</option>";

            /* Option values are added by looping through the array */

        }
    ?>
</select>

的CSS

/* turn it off completely */
select:active, select:hover, select:focus {
outline: none;
}

select option:hover {
    background: linear-gradient(#a81b1b, #000000);
    background-color: #000000 !important; /* for IE */
    color: #a81b1b !important;
    outline: none;
    }

select option:checked, select option:active, select option:disabled {
    background: linear-gradient(#000000, #000000);
    background-color: #000000 !important; /* for IE */
    color: #a81b1b !important;
    }

.sometext::-webkit-scrollbar {
    width: 8px;
}

/* Track */
    .sometext::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

/* Handle */
.sometext::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #a81b1b;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

.sometext {
    color: #a81b1b;
    background-color: black;
    width: 225px;
    border: 3px inset;
    border-color: #a81b1b;
    scrollbar-face-color: #367CD2;
    scrollbar-shadow-color: #FFFFFF;
    scrollbar-highlight-color: #a81b1b;
    scrollbar-3dlight-color: #FFFFFF;
    scrollbar-darkshadow-color: #FFFFFF;
    scrollbar-track-color: #FFFFFF;
    scrollbar-arrow-color: #FFFFFF;
}

最佳答案

因此，如果我现在能从您的评论中更好地理解您的问题，则不确定如何使用表单选择框的默认选项来完成此操作。我为您提供的方法是通过简单的html / js / css获得类似结果的一种方法，希望您可以将其适应您的需求：

<html>
<head>
</head>
<body>
  <div>
    <ul class="redhue">
      <li onClick="changeSelectionTo(this)">1</li>
      <li onClick="changeSelectionTo(this)">2</li>
      <li onClick="changeSelectionTo(this)">3</li>
    </ul>
  </div>
<script>
  var currentlySelected;
  function changeSelectionTo(item) {
    if(currentlySelected){
      currentlySelected.classList.remove("selected");
    }
    currentlySelected = item;
    item.classList.add("selected");
    console.log(item.innerText);
  }
</script>
<style>
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
  }

  li:hover,
  .selected {
    background: linear-gradient(#a81b1b, #000000);
    background-color: #000000; /* for IE */
    color: #a81b1b;
  }

  .redhue {
    color: #a81b1b;
    background-color: black;
    width: 225px;
    border: 3px inset;
    border-color: #a81b1b;
    list-style: none;
  }
</style>
</body>
</html>

我离开了console.log语句，以显示如何检索列表项的值，以用于需要它的任何东西。

关于php - CSS有一个列表框，我需要它选择不将文本颜色更改为事件或不事件，焦点或未聚焦。点击添加，点击添加，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49959734/