0

As the title expresses, I wish to turn a radio button <input type="radio"> into an image, while still having the function of selecting it, changing the image. Here is an example (The code is in Svelte but its pretty much vanilla html)


    <h2>Select Country to continue</h2>
    <form class="white" action="" on:submit={countrysubmit} bind:this={form}>
    <label for="US">
    <input type="radio" name="US" value="US">
    </label>
    </form>
    </main>
<style></style>

I want the US radio button thing to be an image, that can change while being selected and also have the selection be visible via JS (via .forEach, looping to find the selected element).

SUPA
  • 3
  • 2
  • jmargolisvt No, because I want the whole radio button to be the image, not the radio button to be inside the image, – SUPA Sep 29 '22 at 15:45
  • 2
    @SUPA: You clearly have not read the answers of the question fully. That is exactly what that question is about. It says so right in the title. – H.B. Sep 29 '22 at 18:25
  • It's not about the question, it's about the solutions. They only work in a certain spot inside the image – SUPA Oct 01 '22 at 05:51
  • You just have to wrap the radio and the image in a `label` and hide the radio button, like the accepted answer explains. – H.B. Oct 01 '22 at 10:32

0 Answers0