Php css有一个列表框，我需要它在上面选择，既不改变文本颜色为活动或不活动，焦点或不焦点。单击其“添加”，然后单击“添加”
我有一个列表框，我需要它在选择既不改变文本颜色为活动或非活动，重点或不重点。点击添加，点击添加。在这个列表中，文本在选择时保持白色，在单击列表框外时变为黑色。我需要它保持红色，只有背景改变时，点击，以显示它被点击，然后只是回到黑色。在询问之前，我已经做了几天了，在多次重写代码之后，代码中可能会出现错误Php css有一个列表框，我需要它在上面选择，既不改变文本颜色为活动或不活动，焦点或不焦点。单击其“添加”，然后单击“添加”,php,jquery,html,css,Php,Jquery,Html,Css,我有一个列表框，我需要它在选择既不改变文本颜色为活动或非活动，重点或不重点。点击添加，点击添加。在这个列表中，文本在选择时保持白色，在单击列表框外时变为黑色。我需要它保持红色，只有背景改变时，点击，以显示它被点击，然后只是回到黑色。在询问之前，我已经做了几天了，在多次重写代码之后，代码中可能会出现错误 <select onclick="" class="sometext" name="sometext" size="5"> <?php $sql = "
<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>
因此，如果我现在从您的评论中更好地理解了您的问题，我不确定如何使用表单的选择框的默认选项来实现这一点。我为您提供的是一种通过简单的ol'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语句来显示如何检索列表项的值，无论您需要它做什么。。。希望这有帮助 不，然后我失去了我设置的背景色。我有它，所以只有文本是错误的。背景默认蓝色高亮显示消失，背景仅在u单击时更改颜色，然后所有其他样式都相同。除了文本颜色值默认为黑色活动列表项外，单击列表外并单击白色。文本需要始终保持红色。颜色：a81b1b！重要的在这些情况下似乎什么都不做。我不希望列表显示任何被选中的内容，在这种形式下，你可以多次单击同一列表项，将它们添加到另一个字段。但是，背景仅高亮显示一次，以显示它已被单击。然后，所有列表项返回未选中。可能在选择项目后，将其添加到字段中，然后以某种方式取消选择该项目？？哈哈，不知道。但是，我仍然会得到默认的白色文本onclick。。。是的，这正是我需要的。非常感谢。
<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>