Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
243 views
in Technique[技术] by (71.8m points)

CSS+HTML Radio button - every button have other img how?

Hello I want to have for every radio-button other image not for all button's same image. How would I do that? I tried it on many ways but none has worked yet..

My code with only 1 img for all radio-button is:

<head>
<style>
input[type=radio]:before {
    display: block;
    width: 50px;
    height: 50px;
    content: '';
    position: absolute;
    background-image: url(img.png);
    background-size: 50px 50px;
    pointer-events: none;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

input[type=radio]:checked:before {
    background-image: url(img.png);
        border:2px solid #3e6cd4;
          box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
}

.radiostyle {
    display:inline-block;
    width: 50px;
    height: 50px;
    background-color: blue;

}

</style>
</head>
<body>
<input type="radio" name="radio1" class="radiostyle" value="1">
<input type="radio" name="radio1" class="radiostyle" value="2">
<input type="radio" name="radio1" class="radiostyle" value="3">
</body>

Thanks for help!

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can use additional CSS selectory, otherwise add seperate classes or id's:

input[type="radio"][value="1"]:before {
    background-image: url(img1.png);
}

input[type="radio"][value="1"]:checked:before {
    background-image: url(img1.png);
}

input[type="radio"][value="2"]:before {
    background-image: url(img2.png);
}

input[type="radio"][value="2"]:checked:before {
    background-image: url(img2.png);
}

input[type="radio"][value="3"]:before {
    background-image: url(img3.png);
}

input[type="radio"][value="3"]:checked:before {
    background-image: url(img3.png);
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...