Bonjour,
Je souhaite ajouter un pictogramme devant chaque entrée d'un select. J'ai fait une tentative (code test joint) sans select, cela fonctionne mais j'espère que quelqu'un a une solution plus simple; je souhaiterais rester avec un select. Je souhaite si possible d'éviter le javascript.
Merci.
Modifié par luxojr (20 Jan 2020 - 11:22)
Je souhaite ajouter un pictogramme devant chaque entrée d'un select. J'ai fait une tentative (code test joint) sans select, cela fonctionne mais j'espère que quelqu'un a une solution plus simple; je souhaiterais rester avec un select. Je souhaite si possible d'éviter le javascript.
Merci.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document sans nom</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
/* Dropdown Button */
.dropbtn {
/*background-color: #4CAF50;*/
background-color: #f0f0f0;
color: #000;
padding: 4px;
font-size: 0.875em;
border: none;
width: 250px;
height:30px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
/*border-radius:4px;*/
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
/*min-width: 160px;*/
width:250px;
/*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
z-index: 1;
font-family: Arial, Helvetica, sans-serif;
/*border-radius:4px;*/
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
padding-right: 10px;
padding-left: 45px;
padding-top: 10px;
padding-bottom: 10px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #ccc; color:#000;}
.background1 {
background-image: url(picto-drop1.svg);
background-repeat: no-repeat;
background-position: left;
}
.background2 {
background-image: url(picto-drop2.svg);
background-repeat: no-repeat;
background-position: left;
}
.background3 {
background-image: url(picto-drop3.svg);
background-repeat: no-repeat;
background-position: left;
}
.style-data-search {
box-sizing: border-box;
width: 250px;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.875em;
color: #333;
text-align: center;
height: 20px; /*border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #CCCCCC;
border-right-color: #CCCCCC;
border-left-color: #CCCCCC;*/
}
body {
background-color: #FFFFFF;
background-image: url(background.png);
background-repeat: repeat;
}
</style>
<script>
function MajDataFunction(objet_cible, valeur_content) {
//alert(objet_cible +" - "+valeur_content)
document.getElementById(objet_cible).value = document.getElementById(valeur_content).innerHTML;
}
</script>
</head>
<body>
<div style="width:250px">
<div>
<input name="data-search" type="text" readonly class="style-data-search" id="data-search">
</div>
<div class="dropdown">
<button class="dropbtn">
Sélectionnez un thème
<i class="fa fa-caret-down"></i>
</button>
<!--
<button id="mybouton" style="width:250px; height:30px;border:0px;backgroundColor:#f0f0f0;" onMouseover="document.getElementById('mybouton').style.backgroundColor = '#ccc';" onMouseout="document.getElementById('mybouton').style.backgroundColor = '#f0f0f0;'">
Sélectionnez un thème
</button>
-->
<div class="dropdown-content">
<!--<a href="#" class="background1" title="Thème : Vie quotidienne" id="theme-1" onClick="MajDataFunction('data-search', 'theme-1')">Vie quotidienne</a>-->
<!--<a href="#" class="background1" title="Thème : Vie quotidienne" id="theme-1" onClick="document.getElementById('data-search').value = document.getElementById('theme-1').innerHTML;">Vie quotidienne</a>-->
<a href="#" class="background1" title="Thème : Vie quotidienne" onClick="document.getElementById('data-search').value = this.innerHTML;">Vie quotidienne</a>
<!--<a href="#" class="background2" title="Thème : Culture" id="theme-2" onClick="document.getElementById('data-search').value = document.getElementById('theme-2').innerHTML;">Culture</a>-->
<a href="#" class="background2" title="Thème : Culture" onClick="document.getElementById('data-search').value = this.innerHTML;">Culture</a>
<!--<a href="#" class="background3" title="Thème : Sport" id="theme-3" onClick="document.getElementById('data-search').value = document.getElementById('theme-3').innerHTML;">Sport</a>-->
<a href="#" class="background3" title="Thème : Sport" onClick="document.getElementById('data-search').value = this.innerHTML;">Sport</a>
</div>
</div>
</div>
</body>
</html>Modifié par luxojr (20 Jan 2020 - 11:22)