Home>
Css clicked with a red border on the image clicked, but when it was moved to a slider, the same order as the first image displayed even when the slide image was clicked A red frame has been added to the image.
If there is a way to add a red border to the clicked image even if it is a slider, it would be helpful if you could teach me.
<p>Please select a color<span></span></p>
<input type = "radio" name = "check-color" value = "1" />
<label for = "check-color1"></label>
<input type = "radio" name = "check-color" value = "2" />
<label for = "check-color2"></label>
<input type = "radio" name = "check-color" value = "3" />
<label for = "check-color3"></label>
<input type = "radio" name = "check-color" value = "4" />
<label for = "check-color4"></label>
<input type = "radio" name = "check-color" value = "1" />
<label for = "check-color1"></label>
<input type = "radio" name = "check-color" value = "2" />
<label for = "check-color2"></label>
<input type = "radio" name = "check-color" value = "3" />
<label for = "check-color3"></label>
<input type = "radio" name = "check-color" value = "4" />
<label for = "check-color4"></label>
<input type = "radio" name = "check-color" value = "3" />
<label for = "check-color3"></label>
<input type = "radio" name = "check-color" value = "4" />
<label for = "check-color4"></label>
.color-title {
border-top: solid 1px # B3B3B3;
padding-top: 20px;
}.color {
display: flex;
justify-content: space-around;
align-items: center;
}
.check-color-item {
height: auto;
}
.check-color-item img {
vertical-align: bottom;
width: 100%;
}
input [type = "radio"] {
display: none;
}
input [type = "radio"] + .check-color-item img {
position: relative;
width: 72px;
height: 86px;
text-align: center;
display: flex;
padding: 2px;
}
input [type = "radio"]: checked + .check-color-item img {
border: solid 2px red;
padding: 0;
}
$(function () {
$('. slider2'). slick ({
infinite: false,
dots: true,
arrows: false,
slidesToShow: 4,
slidesToScroll: 4
});
});
I tried it, but I tried to add the image-border-ck class so that it can be turned on and off with a click event.
<p>Please select a color<span></span></p>
<input type = "radio" name = "check-color" value = "1" />
<label for = "check-color1"></label>
<input type = "radio" name = "check-color" value = "2" />
<label for = "check-color2"></label>
<input type = "radio" name = "check-color" value = "3" /><label for = "check-color3"></label>
<input type = "radio" name = "check-color" value = "4" />
<label for = "check-color4"></label>
<input type = "radio" name = "check-color" value = "1" />
<label for = "check-color1"></label>
<input type = "radio" name = "check-color" value = "2" />
<label for = "check-color2"></label>
<input type = "radio" name = "check-color" value = "3" />
<label for = "check-color3"></label>
<input type = "radio" name = "check-color" value = "4" />
<label for = "check-color4"></label>
<input type = "radio" name = "check-color" value = "3" />
<label for = "check-color3"></label>
<input type = "radio" name = "check-color" value = "4" />
<label for = "check-color4"></label>
. image-border img {
position: relative;
width: 72px;
height: 86px;
text-align: center;
display: flex;
padding: 2px;
}
.image-border-ck img {
border: solid 2px red;
padding: 0;
}
$(function () {
$('. image-border'). on ('click', function () {
$('. image-border'). removeClass ('image-border-ck');
$(this) .addClass ('image-border-ck');
});
});
-
Answer # 1
-
Answer # 2
Aiueo Kikikuko
Related articles
- css - about the description of the border property
- background image from scss file is not displayed in rails
- css - i want to insert text below the image with bootstrap4
- css - i want to display a rectangular image only in the square area with 90% width of the parent element as one side
- css - about the image is not displayed in html
- php change the displayed page for each clicked image
- i want to make only the css background image semi-transparent, but rgba () does not work
- css - how to specify the size of the image side by side with flex-box
- css - the image becomes vertical when i write the text
- css - i want to insert a logo image to the left of the header
- css - i want to display an image
- css | what is the "position frame (with image)" outside the margin in the deperova tool?
- css - i want to delete the eye-catching image that will be automatically attached in the wordpress article
- css - i want to display the image on the full screen, but the header etc obstructs
- i want to reflect the scss of the image, but i'm not sure which one to apply
- css - site copy i want to make the lower side of the background image round
- css - i want to change the colorbox according to the image size inside
- i want to display 2 or 3 columns differently for each row in the css image display
- css - how to unify different image sizes to the same size for responsive display
- css - i would like to know how you can partially add a border property to a circle
Related questions
- javascript : Line break in code
- javascript - swipe with thumbnails and swipe to display them out of alignment
- html - about processing when elements are layered in jquery hover event
- java - the hamburger menu cannot be displayed properly
- javascript - i want to animate the characters that flow from left to right when reloaded
- i want to change the color of hover every time i click with javascript
- javascript - i want to add the current display function of the current page
- html - about the implementation of the accordion
- css - youtube iframe api doesn't work when hidden display: none
- javascript - input screen like unlocking line
because
Setid
is duplicated.will only respond to the first
# check-color3
.input id
andlabel for
correctly.