Kleurkiezer met stalen en eigen kleur Nieuw

<!-- Kleurkiezer met stalen en eigen kleur · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kks"><div class="kks__in">
<div class="kks__pv" aria-hidden="true"><svg viewBox="0 0 100 120"><rect class="kks__fr" x="6" y="6" width="88" height="108" rx="2"/><rect x="16" y="16" width="68" height="42" fill="#cfe0e8"/><rect x="16" y="66" width="68" height="38" fill="#cfe0e8"/><path d="M16 16l30 0-30 30z" fill="#e4eef2"/><path d="M16 66l24 0-24 22z" fill="#e4eef2"/></svg></div>
<div class="kks__ctl">
<p class="kks__prod">Buitenlak voor kozijnen, 750 ml</p>
<fieldset class="kks__fs"><legend class="kks__lg">Kleur: <span class="kks__name">Grachtengroen, RAL 6009</span></legend>
<div class="kks__sw">
<label class="kks__s" style="--c:#27352a"><input type="radio" name="kks-c" value="#27352a" data-n="Grachtengroen, RAL 6009" checked><span class="kks__vh">Grachtengroen</span></label>
<label class="kks__s" style="--c:#383e42"><input type="radio" name="kks-c" value="#383e42" data-n="Antraciet, RAL 7016"><span class="kks__vh">Antraciet</span></label>
<label class="kks__s" style="--c:#e8dfcd"><input type="radio" name="kks-c" value="#e8dfcd" data-n="Crèmewit, RAL 9001"><span class="kks__vh">Crèmewit</span></label>
<label class="kks__s" style="--c:#5c2027"><input type="radio" name="kks-c" value="#5c2027" data-n="Ossenbloed, RAL 3005"><span class="kks__vh">Ossenbloed</span></label>
<label class="kks__s" style="--c:#24364b"><input type="radio" name="kks-c" value="#24364b" data-n="Staalblauw, RAL 5011"><span class="kks__vh">Staalblauw</span></label>
<label class="kks__s kks__s--eigen"><input type="radio" name="kks-c" value="eigen" data-n="Eigen kleur"><span class="kks__vh">Eigen kleur</span><span class="kks__plus" aria-hidden="true"></span></label>
</div></fieldset>
<div class="kks__own" hidden>
<label class="kks__pick"><input class="kks__col" type="color" value="#b5651d" aria-label="Kies een eigen kleur"></label>
<label class="kks__hexl"><span class="kks__vh">Hexcode</span><input class="kks__hex" type="text" value="#b5651d" maxlength="7" spellcheck="false" aria-describedby="kks-he"></label>
<p class="kks__err" id="kks-he"></p>
</div>
<div class="kks__buy"><span class="kks__price" aria-live="polite">&euro; 32,95</span><button class="kks__btn" type="button">In winkelwagen</button></div>
</div>
</div></div>
</div>

/* Kleurkiezer met stalen en eigen kleur · NedDev · eigen werk. */
.kks{position:absolute;inset:0;overflow:auto;display:flex;padding:12px;box-sizing:border-box;background:#f4f3f1;font-family:'Switzer',sans-serif;color:#0a0a0a}
.kks *,.kks *::before,.kks *::after{box-sizing:border-box}
.kks [hidden]{display:none!important}
.kks__in{margin:auto;width:100%;max-width:400px;display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:center;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:8px;padding:14px}
.kks__pv svg{display:block;width:100%;height:auto}
.kks__fr{fill:var(--kks,#27352a);transition:fill .3s ease}
.kks__ctl{min-width:0}
.kks__prod{margin:0 0 6px;font-size:14px;font-weight:700}
.kks__fs{border:0;margin:0;padding:0;min-width:0}
.kks__lg{padding:0;font-size:12.5px;color:#4a4a4a;margin-bottom:6px}
.kks__name{color:#0a0a0a;font-weight:600}
.kks__sw{display:flex;flex-wrap:wrap;gap:6px}
.kks__s{position:relative;width:30px;height:30px;border-radius:4px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(10,10,10,.18);cursor:pointer;transition:transform .15s}
.kks__s:hover{transform:translateY(-1px)}
.kks__s input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.kks__s:has(input:checked)::after{content:'';position:absolute;inset:-4px;border:2px solid #0a0a0a;border-radius:6px}
.kks__s:has(input:focus-visible)::before{content:'';position:absolute;inset:-7px;border:2px solid #F5480F;border-radius:8px}
.kks__s--eigen{background:#fff;box-shadow:inset 0 0 0 1px #8c8c8c}
.kks__plus::before,.kks__plus::after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:#0a0a0a}
.kks__plus::after{transform:rotate(90deg)}
.kks__vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kks__own{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
.kks__pick{display:block;width:34px;height:34px;border-radius:4px;overflow:hidden;box-shadow:inset 0 0 0 1px #8c8c8c;flex:none}
.kks__col{display:block;width:44px;height:44px;margin:-5px;padding:0;border:0;cursor:pointer;background:none}
.kks__col:focus-visible{outline:2px solid #F5480F}
.kks__pick:has(.kks__col:focus-visible){box-shadow:0 0 0 2px #F5480F}
.kks__hex{width:92px;height:34px;padding:0 8px;font:500 14px 'Switzer',sans-serif;color:#0a0a0a;border:1px solid #8c8c8c;border-radius:4px}
.kks__hex:focus-visible{outline:none;border-color:#0a0a0a;box-shadow:0 0 0 3px rgba(245,72,15,.35)}
.kks__hex[aria-invalid="true"]{border-color:#B42318}
.kks__err{flex-basis:100%;margin:0;font-size:12.5px;color:#4a4a4a}
.kks__err.is-bad{color:#B42318}
.kks__err:empty{display:none}
.kks__buy{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.kks__price{font-size:15px;font-weight:700}
.kks__btn{height:36px;padding:0 14px;border:0;border-radius:4px;background:#0a0a0a;color:#fff;font:600 13.5px 'Switzer',sans-serif;cursor:pointer;transition:background-color .15s}
.kks__btn:hover{background:#2a2a2a}
.kks__btn:active{transform:translateY(1px)}
.kks__btn:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
@media (max-width:420px){.kks__in{grid-template-columns:64px 1fr;gap:10px;padding:12px}}
@media (prefers-reduced-motion:reduce){.kks *{transition:none!important}}

// Kleurkiezer met stalen en eigen kleur · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.kks');if(!w)return;
var sfx='-'+Math.random().toString(36).slice(2,7);
w.querySelectorAll('[id]').forEach(function(el){el.id=el.id+sfx;});
w.querySelectorAll('[aria-describedby]').forEach(function(el){el.setAttribute('aria-describedby',el.getAttribute('aria-describedby')+sfx);});
w.querySelectorAll('input[type=radio]').forEach(function(r){r.name=r.name+sfx;});
var nm=w.querySelector('.kks__name'),own=w.querySelector('.kks__own'),col=w.querySelector('.kks__col'),hex=w.querySelector('.kks__hex'),he=w.querySelector('.kks__err'),pr=w.querySelector('.kks__price'),btn=w.querySelector('.kks__btn'),eig=w.querySelector('.kks__s--eigen');
function setC(c){w.style.setProperty('--kks',c);}
function eigen(c){eig.style.background=c;eig.querySelector('.kks__plus').style.display='none';nm.textContent='Eigen kleur '+c.toUpperCase()+', op maat gemengd';he.textContent='Mengen op maat kost \u20ac\u00a04,00 extra en duurt 1 werkdag langer.';he.classList.remove('is-bad');}
w.querySelectorAll('input[type=radio]').forEach(function(r){r.addEventListener('change',function(){btn.textContent='In winkelwagen';
 if(r.value==='eigen'){own.hidden=false;setC(col.value);eigen(col.value);pr.textContent='\u20ac\u00a036,95';}
 else{own.hidden=true;setC(r.value);nm.textContent=r.getAttribute('data-n');pr.textContent='\u20ac\u00a032,95';}});});
col.addEventListener('input',function(){hex.value=col.value;hex.removeAttribute('aria-invalid');setC(col.value);eigen(col.value);});
hex.addEventListener('input',function(){var v=hex.value.trim();if(v&&v[0]!=='#')v='#'+v;
 if(/^#[0-9a-f]{6}$/i.test(v)){hex.removeAttribute('aria-invalid');col.value=v.toLowerCase();setC(v);eigen(v);}
 else if(v.length>=7){hex.setAttribute('aria-invalid','true');he.textContent='Gebruik zes tekens na het hekje, bijvoorbeeld #B5651D';he.classList.add('is-bad');}});
btn.addEventListener('click',function(){btn.textContent='Toegevoegd';});
setC('#27352a');
}
init(document.querySelector('.jouw-container'));