by Niko May 22nd 2023, 8:24 pm
Coucou
@Friendly Toucan,
sadly you cannot use images in a
element, but maybe this can be helpful.
edit: I found a possible way, so I am hiding the older solutions in a spoiler, just as reference I will keep them
Create a new javascript code in all pages with this content:
- Code:
var $checkbox = $('ul#profile_field_8_2 li label input[type=radio]');
var $select = $('<select></select>'); // create a select
$select.attr('name', $checkbox.attr('name')); // set name and value
$checkbox.each(function(i, checkbox){
var str = $checkbox.eq(i).val();
var alt = $checkbox.eq(i).parent().find('img').attr('title');
var flag = $checkbox.eq(i).parent().find('img').attr('src');
var checked = $checkbox.eq(i).prop('checked');
$select.append($('<option>').val(str).attr('flag',flag).text(alt).attr('selected',checked));
});
$checkbox.parent().parent().parent().after($select);
$('ul#profile_field_8_2 li label').remove();
$('select[name="profile_field_8_2"]').after('<div id="sovereign_state_flag"></div>');
$('#sovereign_state_flag').html('<img src="'+$('select[name="profile_field_8_2"]').find(":selected").attr('flag')+'" />');
$('select[name="profile_field_8_2"]').on('change', function() {
var flag = $(this).find(":selected").attr('flag');
$('#sovereign_state_flag').html('<img src="'+flag+'" />');
});
And this CSS:
- Code:
div#sovereign_state_flag {
display: inline;
vertical-align: middle;
margin-left: 7px;
}
This is the outcome:
- Edit - Other options:
Option 1 - Align all items
You can try this CSS
- Code:
ul#profile_field_8_2 li {
display: inline-flex;
}
to get this result
- Demo Result:
Option 2 - Replace checkboxes with select text
Add this Javascript code
- Code:
$(function() {
var $checkbox = $('ul#profile_field_8_2 li label input[type=radio]');
var $select = $('<select></select>'); // create a select
$select.attr('name', $checkbox.attr('name')); // set name and value
$checkbox.each(function(i, checkbox){
var str = $checkbox.eq(i).val();
var alt = $checkbox.eq(i).parent().find('img').attr('title');
$select.append($('<option>').val(str).text(alt));
});
$checkbox.parent().parent().parent().after($select);
$('ul#profile_field_8_2 li label').remove();
});
to get this result:
- Demo Result: