5223 sujets

Sémantique web et HTML

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.
<!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)
Salut

Pour Firefox tu peux utilisé background image

<select>
  <option style="background-image:url(male.png);">male</option>
  <option style="background-image:url(female.png);">female</option>
  <option style="background-image:url(others.png);">others</option>
</select> 


Ou séparé le tout

<select id="gender">
  <option>male</option>
  <option>female</option>
  <option>others</option>
</select>  


select#gender option[value="male"]   { background-image:url(male.png);   }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }


Par contre pour les autres navigateur il faut passé par du JS
par exemple avec Jquery UI et Selectable ou encore SelectMenu
Modifié par JENCAL (20 Jan 2020 - 11:56)
JENCAL a écrit :
Salut

Pour Firefox tu peux utilisé background image

&lt;select&gt;
  &lt;option style="background-image:url(male.png);"&gt;male&lt;/option&gt;
  &lt;option style="background-image:url(female.png);"&gt;female&lt;/option&gt;
  &lt;option style="background-image:url(others.png);"&gt;others&lt;/option&gt;
&lt;/select&gt; 


Ou séparé le tout

&lt;select id="gender"&gt;
  &lt;option&gt;male&lt;/option&gt;
  &lt;option&gt;female&lt;/option&gt;
  &lt;option&gt;others&lt;/option&gt;
&lt;/select&gt;  


select#gender option[value="male"]   { background-image:url(male.png);   }
select#gender option[value="female"] { background-image:url(female.png); }
select#gender option[value="others"] { background-image:url(others.png); }


Par contre pour les autres navigateur il faut passé par du JS
par exemple avec Jquery UI et Selectable ou encore SelectMenu

Bonjour et merci pour l’info
Modifié par Greg_Lumiere (30 Jul 2020 - 09:45)