set style to checked + child of element in tailwind

Masir 0
Viewed 44

i have some checkbox and some span tag inside them. how can i set style to span when input checked? the html code :

<div className="m-4">
                    <p id="id_work_days">
                        <label><input className='hidden checked:child:bg-gray-700 ' type="checkbox" name="work_days" value="1"/><span className='inline-block p-3 mx-4 bg-gray-200 text-slate-700 rounded-2xl shadow-xl '>sun</span></label>
                        <label><input className='hidden checked:child:bg-gray-700' type="checkbox" name="work_days" value="2"/><span className='inline-block p-3 mx-4 bg-gray-200 text-slate-700 rounded-2xl shadow-xl '>Mon</span></label>
                        <label><input className='hidden checked:child:bg-gray-700' type="checkbox" name="work_days" value="3"/><span className='inline-block p-3 mx-4 bg-gray-200 text-slate-700 rounded-2xl shadow-xl '>Tue</span></label>
                        <label><input className='hidden checked:child:bg-gray-700' type="checkbox" name="work_days" value="4"/><span className='inline-block p-3 mx-4 bg-gray-200 text-slate-700 rounded-2xl shadow-xl '>wen</span></label>
                        <label><input className='hidden checked:child:bg-gray-700' type="checkbox" name="work_days" value="5"/><span className='inline-block p-3 mx-4 bg-gray-200 text-slate-700 rounded-2xl shadow-xl '>Fri</span></label>
                        <label><input className='hidden checked:child:bg-gray-700' type="checkbox" name="work_days" value="6"/><span className='inline-block p-3 mx-4 bg-gray-200 text-slate-700 rounded-2xl shadow-xl '>Thu</span></label>
                        <label><input className='hidden checked:child:bg-gray-700' type="checkbox" name="work_days" value="7"/><span className='inline-block p-3 mx-4 bg-gray-200 text-slate-700 rounded-2xl shadow-xl '>Fri</span></label>
                    </p>
                </div>

the css code that i want to do :

#id_work_days input[type="checkbox"]:checked + span {
    background-color: gold;
    color: black;
  }
tailwind-css css html
1 Answers

You can use peer on input and peer-checked:bg-gray-700 on span

Note that I'm using className as yours but in this sandbox, I'm using class for usual style usage

<div className="m-4">
  <p id="id_work_days">
    <label><input className="peer hidden" type="checkbox" name="work_days" value="1" /><span className="mx-4 inline-block rounded-2xl bg-gray-200 p-3 text-slate-700 shadow-xl peer-checked:bg-gray-700">sun</span></label>
    <label><input className="peer hidden" type="checkbox" name="work_days" value="2" /><span className="mx-4 inline-block rounded-2xl bg-gray-200 p-3 text-slate-700 shadow-xl peer-checked:bg-gray-700">Mon</span></label>
    <label><input className="peer hidden" type="checkbox" name="work_days" value="3" /><span className="mx-4 inline-block rounded-2xl bg-gray-200 p-3 text-slate-700 shadow-xl peer-checked:bg-gray-700">Tue</span></label>
    <label><input className="peer hidden" type="checkbox" name="work_days" value="4" /><span className="mx-4 inline-block rounded-2xl bg-gray-200 p-3 text-slate-700 shadow-xl peer-checked:bg-gray-700">wen</span></label>
    <label><input className="peer hidden" type="checkbox" name="work_days" value="5" /><span className="mx-4 inline-block rounded-2xl bg-gray-200 p-3 text-slate-700 shadow-xl peer-checked:bg-gray-700">Fri</span></label>
    <label><input className="peer hidden" type="checkbox" name="work_days" value="6" /><span className="mx-4 inline-block rounded-2xl bg-gray-200 p-3 text-slate-700 shadow-xl peer-checked:bg-gray-700">Thu</span></label>
    <label><input className="peer hidden" type="checkbox" name="work_days" value="7" /><span className="mx-4 inline-block rounded-2xl bg-gray-200 p-3 text-slate-700 shadow-xl peer-checked:bg-gray-700">Fri</span></label>
  </p>
</div>
Nick Vu0
Related