[Solved] Change icons in a Radio Button Grid



I want to change the icons in a radio button grid – 5 point scale.

I have managed to replace the first and the last icons in the radio grid (CSS script below).


.sg-replace-icons .sg-table .sg-second-cell input[type=radio] + label span.sg-icon-target:before

{content: “\1f620”; font-size:2.0em; color: #990000;}

.sg-replace-icons .sg-table .sg-second-cell input[type=radio]:checked + label span.sg-icon-target:before

{content: “\e609”; color: #990000;}


Can someone help me to identify the options 2, 3 and 4 in the grid ?  i.e   .sg-third-cell doesn’t work?

Very grateful if someone can help.



Gilles Renaud answered

    Best answer


    You can use CSS’s nth-child to do this. See here for an example: http://www.surveygizmo.com/s3/3079730/change-radio-button-icon-by-column-in-table

    And here’s the code (note, this will not work on mobile devices if you have mobile optimization turned on):


    /*caitlin 09.29.16*/

    /* Replace the url in each section to specify which image to show in each column.
    Columns are targeted using nth-child in each section. */

    .sg-replace-icons td:nth-child(2) input[type=checkbox] + label span.sg-icon-target:before {
    content: url(“https://cdn2.scratch.mit.edu/get_image/user/422067_32x32.png”);

    .sg-replace-icons td:nth-child(3) input[type=checkbox] + label span.sg-icon-target:before {
    content: url(“http://orig14.deviantart.net/a848/f/2012/121/d/3/squirtle_black_and_white_sprite_by_pokemon_d_p_elite_4-d4y7up6.gif”);

    .sg-replace-icons td:nth-child(4) input[type=checkbox] + label span.sg-icon-target:before {
    content: url(“https://img.pokemondb.net/sprites/black-white/anim/normal/jigglypuff.gif”);

    .sg-replace-icons td:nth-child(5) input[type=checkbox] + label span.sg-icon-target:before {
    content: url(“http://orig13.deviantart.net/23f8/f/2011/311/7/c/bulbasaur_sprite_gif_by_sadslug-d4fhc2y.gif”);

    .sg-replace-icons td:nth-child(6) input[type=checkbox] + label span.sg-icon-target:before {
    content: url(“http://orig01.deviantart.net/cbd5/f/2010/023/2/e/pokemon_crystal___vulpix_by_loreo_cookies.gif”);

    .sg-replace-icons td:nth-child(7) input[type=checkbox] + label span.sg-icon-target:before {
    content: url(“https://img.pokemondb.net/sprites/black-white/anim/normal/jolteon.gif”);

    /* Specify the url for the “checked” state here. In this example, the checked state
    will be the same content for all rows/columns. You can target them individually
    with nth-child (like above) instead if you need to. */

    .sg-replace-icons input[type=checkbox].sg-input-checkbox:checked + label span.sg-icon-target:before {
    content: url(“http://orig13.deviantart.net/e804/f/2010/288/1/1/free_floating_pokeball_by_goldfoxtail-d30sg4o.gif”);

    Caitlin Murphy362904 selected as best answer

      Thank you so much Caitlin…

      That works fine…

      Have a good day.



      Gilles Renaud answered


        Question stats

        • Active
        • Views5172 times
        • Answers2 answers
        • Followers1 follower