How with checkbox selected to highlight all parent div

bootstrap
#1

Hello,
In my vue 2.5 / Bootstrap 4,3 app I need to make checkbox middle aligned and I do like :

	<tr v-for="nextSearchResult, index in searchResults" :key="nextSearchResult.Id"  style="width:100%">

		<td style="width:1%; max-width: 25px; " class=" p-0 m-0 pl-2 align-middle">
    		<div class="custom-control custom-checkbox">
    			<input type="checkbox" class="custom-control-input" :id="'next_search_result_id_'+ nextSearchResult.Id"
			       :value="nextSearchResult.Id" v-model="nextSearchResult.is_checked">
    			<label class="custom-control-label" :for="'next_search_result_id_'+ nextSearchResult.Id"></label>
    		</div>
		</td>

and it works ok, but I need when checkbox is selected to highlight all parent div in some styling way.

How to make it ?

Thanks!

#2

Hi,

Unfortunately there is no parent selector in CSS so what you ask is not easily possible. The normal way is to use some JS to add a class to the parent when the checkbox is clicked and then use that new added class to style the [parent.

There are some limited things you can do with CSS but will need specific structures to achieve. For example you could use your label elements :before pseudo class and then absolutely place it in relation to the checkbox parent if position:relative is added to the parent. This would allow a border or some other effect to be placed on the parent but not over the whole div or it would be obscured.

Here is a simple example using the same structure of html that you have shown.

https://codepen.io/paulobrien/pen/WBxwMR

The problem is that as you don’t show any current css we have no way of knowing if you are already using that pseudo class or have stacking contexts in place that will conflict.

As I said at the start the most reliable way would be through scripting and if you want to go that route I can move the thread to the JS forum for you.

1 Like