jz22
Reputation: 2658
How to add text to a image that works as radio button?
I want to use in image as radio button. That works as expected. However the code I found is applying a border to the image when it is active. Instead of the border I want the active image to be covered by a green tick "✓". I don't really know how to do it. Thanks for your help. Below my code with the frame.
HTML:
<fieldset id="theme" style="margin:0; padding:0; border:none;">
<div style="margin-top:10px;">
<figure style="float:left; margin:0;">
<label id="styleinput">
<input type="radio" name="theme" value="defaultlayout"/>
<img src="./static/images/darklayout.png" style="max-width:170px; margin-right:20px;"/>
<figcaption id="caption" style="margin-left:10px; font-size:12px;"><b>Default</b><br><a>Preview</a></figcaption>
</label>
</figure>
<figure style="float:left; margin:0;">
<label id="styleinput">
<input type="radio" name="theme" value="defaultlayout"/>
<img src="./static/images/lightlayout.png" style="max-width:170px; margin-right:20px;"/>
<figcaption id="caption" style="margin-left:10px; font-size:12px;"><b>Light</b><br><a>Preview</a></figcaption>
</label>
</figure>
</div>
</fieldset>
CSS:
#styleinput > input{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
}
#styleinput > input + img{ /* IMAGE STYLES */
cursor:pointer;
border:2px solid transparent;
}
#styleinput > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
border:2px solid #f00;
}
https://jsfiddle.net/k4a71tnt/
Upvotes: 1
Views: 683
Answers (2)
UncaughtTypeError
Reputation: 8752
In the code snippet example below, you'll notice that I've wrapped the img in a containing element in order to use a pseudo-element to display a styled checkmark (utf8 character) on selection.
#styleinput>input {
/* HIDE RADIO */
visibility: hidden;
/* Makes input not-clickable */
position: absolute;
/* Remove input from document flow */
}
#styleinput>input+.img-container {
/* IMAGE STYLES */
cursor: pointer;
position: relative;
margin-right: 20px;
}
#styleinput>input+.img-container img {
max-width: 170px;
}
#styleinput>input+.img-container:before {
/* IMAGE STYLES */
content: "\2713";
opacity: 0;
transition: .7s;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
margin: auto;
position: absolute;
font-size: 20px;
text-align: center;
font-weight: bold;
background: rgba(0, 128, 0, 0.5);
color: white;
border-radius: 100%;
width: 50px;
height: 50px;
line-height: 50px;
}
#styleinput>input:checked+.img-container:before {
/* (RADIO CHECKED) IMAGE STYLES */
opacity: 1;
}<fieldset id="theme" style="margin:0; padding:0; border:none;">
<div style="margin-top:10px;">
<figure style="float:left; margin:0;">
<label id="styleinput">
<input type="radio" name="theme" value="defaultlayout"/>
<div class="img-container"><img src="data:image/png;base64,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"/></div>
<figcaption id="caption" style="margin-left:10px; font-size:12px;"><b>Default</b><br><a>Preview</a></figcaption>
</label>
</figure>
<figure style="float:left; margin:0;">
<label id="styleinput">
<input type="radio" name="theme" value="defaultlayout"/>
<div class="img-container"><img src="data:image/png;base64,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"/></div>
<figcaption id="caption" style="margin-left:10px; font-size:12px;"><b>Light</b><br><a>Preview</a></figcaption>
</label>
</figure>
</div>
</fieldset>Upvotes: 2
Naren Murali
Reputation: 57696
The solution to your problem will be to add an overlay span which wraps around your element figure with a background-image having the transparent tick.
Refer the below code snippet and let me know if you face any issues during implementation.
#styleinput > input {
/* HIDE RADIO */
visibility: hidden;
/* Makes input not-clickable */
position: absolute;
/* Remove input from document flow */
}
#styleinput > input + img {
/* IMAGE STYLES */
cursor: pointer;
border: 2px solid transparent;
}
#styleinput > input:checked + img {
/* (RADIO CHECKED) IMAGE STYLES */
border: 2px solid #f00;
}
#styleinput > input:checked ~ span.overlay-image {
display: block;
}
.parent {
float: left;
margin: 0;
position: relative;
}
.overlay-image {
position: absolute;
display: none;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-image: url('http://www.clker.com/cliparts/2/k/n/l/C/Q/transparent-green-checkmark-md.png');
background-size: 60% 60%;
background-position: top center;
background-repeat: no-repeat;
}<fieldset id="theme" style="margin:0; padding:0; border:none;">
<div style="margin-top:10px;">
<figure class="parent">
<label id="styleinput">
<input type="radio" name="theme" value="defaultlayout" />
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAQYElEQVR4Xu3ce2xkZRnH8ed9z2yBhQRElLC0c047w3JZAjHEyCUoEhKNCmK8EiAQgVVQEJGEP0wMf5BoBCSYqAh4DRgIIuIFBRHBQIwiKpBVLjPtOdNyUyCCbNilnfc1U1nSlm5n1sN72qfvd//teZ/zPJ/nzK9TOsUI/xBAIFoBE+3kDI4AAkIA8BAgELEAARDx8hkdAQKAZwCBiAUIgIiXz+gIEAA8AwhELEAARLx8RkeAAOAZQCBiAQIg4uUzOgIEAM8AAhELEAARL5/RESAAeAYQiFiAAIh4+YyOAAHAM4BAxAIEQMTLZ3QECACeAQQiFiAAIl4+oyNAAPAMIBCxAAEQ8fIZHQECgGcAgYgFCICIl8/oCBAAPAMIRCxAAES8fEZHgADgGUAgYgECIOLlMzoCBADPAAIRCxAAES+f0REgAHgGEIhYgACIePmMjgABwDOAQMQCBEDEy2d0BAgAngEEIhYgACJePqMjQADwDCAQsQABEPHyGR0BAoBnAIGIBQiAiJfP6AgQADwDCEQsQABEvHxGR4AA4BlAIGIBAiDi5TM6AgQAzwACEQsQABEvn9ERIAB4BhCIWIAAiHj5jI4AAcAzgEDEAgRAxMtndAQIAJ4BBCIWIAAiXj6jI0AA8AwgELEAARDx8hkdAQKAZwCBiAUIgIiXz+gIEAA8AwhELEAARLx8RkeAAOAZQCBiAQIg4uUzOgIrMQCSZpoeKt4e5MS/2RizhjUhoF/AeW/MZuN9IbXaA+12+58rYaYVEwDNen1D19rzrJePisibVgIOPSAQSsB49ycvybVmKPlhq9XaGuo+/eouewCsX7d+r27tlUvFyGkisuz99APj6wi8kQLOu0lr7XntPP/pG1l30FrL+oJrpukRXsyPRWTdoA1zHQKrUcAZuXrtrrueu2nTpleqnG/ZAqCRZe+VrtwiVnaucmDuhcCKFfDu9q61J+Z5vqWqHpclAJpZdrjvyu+WevE7516x1j4rXTddFQb3QSCYgPHG2GQ3L7Lnkvdwckt7Mv+IiLhgvcwpXHkADA8P77kmSR60YoYXDuicezEx9pvGyo2P5/nDItKtAoF7IFCVQO/539muOc4bd46Iedei9/VyUbuTf7WKnioPgEaaXiNizlxkuLu6Rk7O8/zpKgbnHggss4Bp1kdP9t5fs/CdsHNuq/VrDm5PtVuhe6w0AMbGxtabrvuHiNi5gzkndyc71d67nL8OCQ1NfQQWE2hm2Xu8l9sWviaMmOtbxcQpodUqDYBGll0pXs6b9+IX/9KQc/s/Ojn5ZOhhqY/AShRojIxeJtZ/YcHrYkasHZ6YmHgmZM9VBoBtjNSfFGv3njuQF7livMgvCDkktRFYyQK9z8JMJ1uesNYOzXttGDlnPM+/FbL3ygIgy7IDEi+9t//z/hnxR7aK4g87MGTSqNcPN5LsK8a1WkXxVxHx/c436vXDxCTHeu+ttXJPK8//OMA5OzoyepRJ/MHWmedmrL8jz/N/97sXX0dgRwUa9fqvxdj3LHhx3NTO84/taK0dub6yAGik6YdEzE8WNtc1ssugv/ccS9P3GWe+IVaybXW8l7+JtxvHJ8fvX2zwRqPxVplx3xXx718QPb9NutOnPTY19cRi55pp+jYv8n0Rc8hr9xLZbMRc3C4mLh8gPHZkD1wbuUAjHb1ExH9xLkNXZFNe5AeHpKksAJppeoYXc+28YZx7oT3Z2WOQAZvp6Jle/DWLXdv7r6ZJYj/YyvPb53599mPGa7beJ2LWL3oP1+0k3h+5MAQa9fpRYuwdIrJ20XNermp38nMIgUE2xzWDCDTqo+eK8V+f//qQp9uT+T6DnP9/r6ksAMay7NPGy7yfZ5zIcxNFvle/5v/39t323rIn273WuRdmrDmwKIqntl0zlqY3GTG9D1Vs958x8ptWnvfees3+GDE2Nrb7q7+pWBLeiz9lvCiu79c7X0dgEIEyr49B6m/vGh0BkGW3ipcT+g7qzOXtyYkLZ1/Iw2P7mcQ91vdM75Xv7NvHJ8f/3Lu2maYXeDG9t/hL/zPyeDvP9+ddQD8ovj6IAAGwxDfpRpptFpFd+kP6h9pFcWjvukaWnS5evtf/TO9PEP0XWkXxtdngyLKfGS/HD3RupjbSeqI1Nci1XIPAUgIEwPZ17GiabrViav0eIdOVR1pT+YGz38nro6d643/Y78zs1718rt3JZ3/+aqbpz72YDwx0rpbU2+325EDXchECSwgQAEvgNLLs9+Ll6H5PkBfznfFiYvZjxo1GY0RmuvnCT1gtVsN4d3Cr09k0ey4dvVDEX9rvXl2Rdl7k+/EjQD8pvj6IAAGwVDr2fv0n5pdLQTrxM4n3h7Y6nb9vu240y75tvWxc8px3N050Op/Ydk2WZXskXffIwg8sva6GkdPbef6DQZbLNQj0EyAA+gg169kV3sj527vMiP9sqyi+Mffrh+y9966bh3a5U6wcvug5Iw93Rd658MM9zSw7xnflV9v7c2Uj8r1WkZ/Bd/9+jzVfH1SAAOgvZcay7CLfdRdba3d67XIn/zbGnNvqTFy3WInZENhpl8vEyFlzfo3oxcsPfM2ePz4+/sJi5/bLsnf4Gfm+T+SAOffaItZf0i6KL1f199r9WbhiNQgQAANuMU3TfWpiP2yMHxbvH58x5uZBPp67/8jIupkkOdqLWJMk9w74H++S0frosda4Q8SYZ02tdlur1frXgK1yGQIDCxAAA1NxIQKrT4AAWH07ZSIEBhYgAAam4kIEVp8AAbD6dspECAwsEGUAdH3vfwJqThxYiQsRWKUC3pjjjZfPzx1v0D+WK0OyrH8MVKZxziKw2gUIgNW+YeZDYAkBAoDHA4GIBQiAiJfP6AgQADwDCEQssOoDwIs8PzQzvfj/ry/ixTN6fALTtdrpIuayqH4LUEXCxfcoMbFGgSg/B0AAaHxU6TmEAAEQQpWaCCgRIACULIo2EQghQACEUKUmAkoECAAli6JNBEIIEAAhVKmJgBIBAkDJomgTgRACBEAIVWoioESAAFCyKNpEIIQAARBClZoIKBEgAJQsijYRCCFAAIRQpSYCSgQIACWLok0EQggQACFUqYmAEgECQMmiaBOBEAIEQAhVaiKgRIAAULIo2kQghAABEEKVmggoESAAlCyKNhEIIUAAhFClJgJKBAgAJYuiTQRCCBAAIVSpiYASAQJAyaJoE4EQAgRACFVqIqBEgABQsijaRCCEAAEQQpWaCCgRIACULIo2EQghQACEUKUmAkoECAAli6JNBEIIEAAhVKmJgBIBAkDJomgTgRACBEAIVWoioESAAFCyKNpEIIQAARBClZoIKBEgAJQsijYRCCFAAIRQpSYCSgQIACWLok0EQggQACFUqYmAEgECQMmiaBOBEAIEQAhVaiKgRIAAULIo2kQghAABEEKVmggoESAAlCyKNhEIIUAAhFClJgJKBAgAJYuiTQRCCBAAIVSpiYASAQJAyaJoE4EQAgRACFVqIqBEgABQsijaRCCEAAEQQpWaCCgRIACULIo2EQghQACEUKUmAkoECAAli6JNBEIIEAAhVKmJgBIBAkDJomgTgRACBEAIVWoioESAAFCyKNpEIIQAARBClZoIKBEgAJQsijYRCCFAAIRQpSYCSgQIACWLok0EQggQACFUqYmAEgECQMmiaBOBEAIEQAhVaiKgRIAAULIo2kQghAABEEKVmggoESAAlCyKNhEIIUAAhFClJgJKBAgAJYuiTQRCCBAAIVSpiYASAQJAyaJoE4EQAgRACFVqIqBEgABQsijaRCCEAAEQQpWaCCgRIACULIo2EQghQACEUKUmAkoECAAli6JNBEIIEAAhVKmJgBIBAkDJomgTgRACBEAIVWoioESAAFCyKNpEIIQAARBClZoIKBEgAJQsijYRCCFAAIRQpSYCSgQIACWLok0EQggQACFUqYmAEgECQMmiaBOBEAIEQAhVaiKgRIAAULIo2kQghAABEEKVmggoESAAlCyKNhEIIUAAhFClJgJKBFZ/AKTpJ42Y78zdh3PuxYnJzu5KdkSbCAQTaNSz88TIlQtu8FS7yNcFu6mImJDF59Zujoye4K2/deH9dt3y8m4PPfPM5qr64D4IrESBZpZ9xXu5aH5v/qF2URwast/KAqAx3GhK0n184TDGyDGtPL8n5JDURmClC4zVs7uMkXfP7dM4+VFrMj85ZO+VBUDv3cZovV5YY0fmDeTlqnYnPzvkkNRGYCULrB8e3reb1AoRSeYFgPgzW0Ux78fmN3qOKgNAFnub45zbmojf0JqcbL/Rw1EPAQ0CjTS9WsScNbfX3uti2rt1U1NTz4ecodIAGBsbq/vpmZa1ds38ocwDtZ2H3v3oo4/+J+Sw1EZgpQk0suzj4uWGhX05I1dP5PmnQvdbaQD0hhlLRy834i9YOJgX+Ysk9qTx8fHHQg9NfQRWgEDSSNPzRcxXRcTO++4v/qU13e4Bj01NPRG6z8oDYMNbNuy2Ze1LD4iY9a9LPeemE2uvEyM3bpmZuT/025/QuNRHYK7AYYcdtubFZ59tOm+PE+/PFisHLirkzcZ2Z+KaKvQqD4DeUM16fYP39l6xssdSQzrnXjHWTlcBwT0QCClg/vddfuf+v3r317aLYqOI+JD9bKu9LAEwGwJpeoR35rZ+IVAFAvdAYIUI3DBSZKfeLXfPVNXPsgXAq+8EDhJnb/aJHFDVwNwHgRUo4EX8Je2iuFhEXJX9LWsA9AZdt27d2rVDQ1/qdt351tqdqhyeeyGw3ALGdR/0xnym3enctxy9LHsAbBu692EIV6tt9CIniZf9lgODeyJQkcDL3sidtmuubU1O/KLq7/pzZ1wxATC3qea+zWEZ6h7knNvLGDNU0VK4DQIhBbz3/iXjfd61dlOe51tC3mzQ2isyAAZtnusQQKCcAAFQzo/TCKgWIABUr4/mESgnQACU8+M0AqoFCADV66N5BMoJEADl/DiNgGoBAkD1+mgegXICBEA5P04joFqAAFC9PppHoJwAAVDOj9MIqBYgAFSvj+YRKCdAAJTz4zQCqgUIANXro3kEygkQAOX8OI2AagECQPX6aB6BcgIEQDk/TiOgWoAAUL0+mkegnAABUM6P0wioFiAAVK+P5hEoJ0AAlPPjNAKqBQgA1eujeQTKCRAA5fw4jYBqAQJA9fpoHoFyAgRAOT9OI6BagABQvT6aR6CcAAFQzo/TCKgWIABUr4/mESgnQACU8+M0AqoFCADV66N5BMoJEADl/DiNgGoBAkD1+mgegXICBEA5P04joFqAAFC9PppHoJwAAVDOj9MIqBYgAFSvj+YRKCdAAJTz4zQCqgUIANXro3kEygkQAOX8OI2AagECQPX6aB6BcgIEQDk/TiOgWoAAUL0+mkegnAABUM6P0wioFiAAVK+P5hEoJ0AAlPPjNAKqBQgA1eujeQTKCRAA5fw4jYBqAQJA9fpoHoFyAgRAOT9OI6BagABQvT6aR6CcAAFQzo/TCKgWIABUr4/mESgnQACU8+M0AqoFCADV66N5BMoJEADl/DiNgGoBAkD1+mgegXICBEA5P04joFqAAFC9PppHoJzAfwE01N559axr3wAAAABJRU5ErkJggg=="
style="max-width:170px; margin-right:20px;" />
<span class="overlay-image"></span>
<figcaption id="caption" style="margin-left:10px; font-size:12px;"><b>Default</b>
<br><a>Preview</a></figcaption>
</label>
</figure>
<figure class="parent">
<label id="styleinput">
<input type="radio" name="theme" value="defaultlayout" />
<img src="data:image/png;base64,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"
style="max-width:170px; margin-right:20px;" />
<span class="overlay-image"></span>
<figcaption id="caption" style="margin-left:10px; font-size:12px;"><b>Light</b>
<br><a>Preview</a></figcaption>
</label>
</figure>
</div>
</fieldset>Upvotes: 1
Related Questions
- Image as Radio Button
- How to create an Image Radio Button with label visible
- How to display an image in a selected radio label?
- Place Radio Buttons over image
- Use Image instead of radio button with text below image
- How to use images instead of Radio Button
- Radio button with custom image
- Image instead of Radio button/text?
- Style radio button with custom images
- How to display text next to radio button?