I am trying to add a new checkbox to a search result page of a travel website with result cards defined as an anchor tag inside a div. Something like below:
<div class="cards">
<a href="some link">Some Information</a>
<div id="price"> Price</div>
.....
</div>
Now, this anchor tag link is over entire cards
div. I am trying to add a checkbox within this card
div to the bottom right but somehow when I try to tick the checkbox, the Some Information
link gets clicks as it is overlaid to entire card.
Below is the code for my checkbox:
<div id="myContainer">
<input type="checkbox" name="myCheckbox" id="myCheckbox" value="red">
<label for="myCheckbox_01_item" class="text">Add to Compare</label>
</div>
And the CSS:
@CHARSET "UTF-8";
/* Main Classes */
.text{
position: relative;
/* margin-top: .70588235rem; */
color: #3e3e3e;
margin: 13px 11px;
float: right;
}
#myCheckbox{
transform: scale(2);
/* margin: 10px; */
}
#myContainer {
outline: black dashed 1px;
width: 238px;
background-color: #ffcb00;
position: absolute;
bottom: 0;
right: 0;
margin-top: auto;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:not(:checked) {
display: inline-block;
width: 15px;
height: 25px;
border: black solid 1px;
background: #FFF ;
margin: 12px 13px;
float: left;
}
#myContainer input[type="checkbox"][name="myCheckbox"]:checked {
display: inline-block;
width: 15px;
height: 25px;
border: black solid 1px;
background: #00355f;
margin: 12px 13px;
float: left;
}
#myContainer input[type="checkbox"][name="myCheckbox"] + label + label.text {
line-height: 18px;
font: normal 12px arial;
display: inline-block;
line-height: 27px;
vertical-align: top;
margin: 5px 0px;
}
Also, if I am keeping it in the bottom left, it appears below the card div box and works fine. PFA the two images to give you the idea about the UI.
Right Checkbox:
Aucun commentaire:
Enregistrer un commentaire