Beispiel:Select-4.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> 

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
 <title>T-Shirt-Konfigurator</title>
 <style>

/* Enter into custom mode */ select,

picker(select) {
 appearance: base-select;

}

.product-configurator { 

 display: grid;
 gap: 1rem;
 max-width: 300px;
 font-family: system-ui, sans-serif;

}

select option { 

 display: flex;
 align-items: center;
 gap: 0.75rem;
 padding: .4rem .6rem;

}

select option::checkmark { 

   content: "✔";

color: steelBlue; font-size: 1.5em; font-weight: bold; }

.variant { 

 font-size: 0.95rem;
 color: #333;

}

.btn-to-open-select { 

 display: flex;
 align-items: center;
 gap: 0.75rem;
 padding: .5rem .8rem;
 border: thin solid #ccc;
 border-radius: .4rem;
 background: white;
 cursor: pointer;

}

.add-to-cart { 

 padding: .6rem 1rem;
 background: #0070f3;
 color: white;
 font-weight: bold;
 border: none;
 border-radius: .4rem;
 cursor: pointer;

} .add-to-cart:hover { 

 background: #0059c1;

}

.swatch { display:inline-block; width:1.25em; aspect-ratio:1; border:thin solid; margin-bottom:-0.25em; }

html { background: transparent!important; 

 --blue: #337599;
 --green: #93b946;
 --red: #c82f04;
 --yellow: #dfac20;
 --lightblue: #d6e3eb;
 --lightgreen: #ebf5d7; 
 --lightred: #ffebe6;
 --lightyellow: #f9eed2;

}

</style> </head> <body>

T-Shirt-Konfigurator


<form class="product-configurator"> 

   <img id="main-preview" src="https://dummyimage.com/300x300/000/fff&text=Black+Tee" alt="Selected T-shirt">

 <label for="color-select">Wähle die Farbe:</label>
 <select name="color-select" id="color-select" class="color-select">
   <button class="btn-to-open-select">
     <selectedcontent></selectedcontent>
   </button>

<optgroup label="Standard"> 

   <option value="black" selected data-img="https://dummyimage.com/300x300/000/fff&text=Black+Tee">
      
     Schwarz
   </option>
  </optgroup> 
  <optgroup><legend>De Luxe</legend>
   <option value="red"
           data-img="https://dummyimage.com/300x300/d22/fff&text=Red+Tee">
      
     Rot
   </option>
   <option value="yellow"
           data-img="https://dummyimage.com/300x300/dfac20/000&text=Yellow+Tee">
      
     Gelb
   </option>   
   <option value="green"
           data-img="https://dummyimage.com/300x300/93b946/000&text=Green+Tee">
      
     Grün
   </option> 
   <option value="blue"
           data-img="https://dummyimage.com/300x300/337599/fff&text=Blue+Tee">
      
     Blau
   </option></optgroup>
 </select>

 <label for="size-select">Wähle Größe:</label>
 <select name="size-select" id="size-select" class="size-select">
   <button class="btn-to-open-select">
     <selectedcontent></selectedcontent>
   </button>
   <option value="xs">Extra Small (XS)</option>
   <option value="s">Small (S)</option>
   <option value="m" selected>Medium (M)</option>
   <option value="l">Large (L)</option>
   <option value="xl">Extra Large (XL)</option>
   <option value="xxl">Double Extra Large (XXL)</option>
   <option value="3xl">Triple Extra Large (3XL)</option>      
 </select>

 <button type="submit" class="add-to-cart">In den Einkaufswagen   🛒</button>

</form>

<script> 

 const colorSelect = document.getElementById("color-select");
 const previewImg = document.getElementById("main-preview");

 colorSelect.addEventListener("input", (e) => {
   const selectedOption = colorSelect.selectedOptions[0];
   const newImg = selectedOption.dataset.img;
   previewImg.src = newImg;
   previewImg.alt = selectedOption.textContent + " T-shirt";
 });

</script>

</body> </html>

Abgerufen am 3.10.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:Select-4.html"