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;
}
CodePudding user response:
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>