gpt4 book ai didi

php - css 有一个列表框,我需要它来选择既不会将文本颜色更改为事件或非事件、焦点或未焦点。它点击添加,点击添加

转载 作者:行者123 更新时间:2023-11-28 01:50:37 25 4
gpt4 key购买 nike

我有一个列表框,我需要它来选择既不将文本颜色更改为事件或非事件、聚焦或不聚焦。它的点击添加,点击添加。在这一个上,文本在选择时保持白色,在单击列表框外时变为黑色。我需要它保持红色,只有当它被点击时背景才会改变,以显示它被点击,然后回到黑色。 (我问了几天才问,重写了这么多次后代码可能有错误。)

<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;
}

最佳答案

因此,如果我现在从您的评论中更好地理解您的问题,我不确定如何使用表单选择框的默认选项来完成此操作。我为您提出的是一种使用普通 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 语句来展示如何检索列表项的值,无论您需要它做什么...希望这有帮助!

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

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com