Hello,
I have asked ChatGPT4 but doesn't seem to understand me!
The code is to select which Language the rest of the site should be in.
I want to have the Radio selector on the Left hand side of the Label, both on the same horizontal (of course )
Like this:
o English is my first language
o El español es mi primer idioma
o Le français est ma première langue
Here is my HTML:
And here is my CSS:
This is how it looks now:
The radio selector is ON TOP instead of on Left Hand Side.
Hope you can help.
I have asked ChatGPT4 but doesn't seem to understand me!
The code is to select which Language the rest of the site should be in.
I want to have the Radio selector on the Left hand side of the Label, both on the same horizontal (of course )
Like this:
o English is my first language
o El español es mi primer idioma
o Le français est ma première langue
Here is my HTML:
HTML:
<div id="base_language_select">
<div>
<input type="radio" id="english" name="base_language" value="English"
<?php echo ($default_base_language == 'English') ? 'checked' : ''; ?>>
<label for="english">English is my first language</label><br>
<input type="radio" id="spanish" name="base_language" value="Spanish"
<?php echo ($default_base_language == 'Spanish') ? 'checked' : ''; ?>>
<label for="spanish">El español es mi primer idioma</label><br>
<input type="radio" id="french" name="base_language" value="French"
<?php echo ($default_base_language == 'French') ? 'checked' : ''; ?>>
<label for="french">Le français est ma première langue</label><br>
<input type="radio" id="german" name="base_language" value="German"
<?php echo ($default_base_language == 'German') ? 'checked' : ''; ?>>
<label for="german">Deutsch ist meine Muttersprache</label><br>
</div>
<button type="button" id="updateBaseLang"></button>
</div>
And here is my CSS:
CSS:
/* Form styling */
form {
display: flex;
flex-direction: column;
align-items: center;
text-align: left;
max-width: 300px;
margin: 0 auto;
}
label {
margin: 10px 0 5px;
font-weight: bold;
}
select {
width: 200px; /* Set the desired width */
padding: 10px; /* Adjust padding if necessary */
border-radius: 5px; /* Optional: keeps the rounded corners */
border: 1px solid #ccc; /* Optional: define the border color */
font-size: 1rem; /* Optional: adjust the font size */
box-sizing: border-box; /* Ensure padding doesn't affect the width */
}
input[type="email"],
input[type="password"],
input {
padding: 10px;
width: 100%;
max-width: 300px;
margin-bottom: 20px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type="number"] {
width: 100px; /* Set the desired width */
padding: 10px; /* Adjust padding if necessary */
border-radius: 5px; /* Optional: keeps the rounded corners */
border: 1px solid #ccc; /* Optional: define the border color */
font-size: 1rem; /* Optional: adjust the font size */
box-sizing: border-box; /* Ensure padding doesn't affect the width */
text-align: center; /* Center the text inside the input */
}
This is how it looks now:
The radio selector is ON TOP instead of on Left Hand Side.
Hope you can help.

Last edited by a moderator: