-1

Below are two HTML snippets to let the user choose a language for the page:

  1. one uses <select> and <option>s,
  2. the other uses a <div> and alternated <input>/<label>s.

What I plan to do is pick one of those (or a better one, if one exists) and use CSS to customize the appearance of it such that something like the following would appear at the top right of the page, i.e. all alternatives should be show at the same time all the time on the page.¹

enter image description here

I any of 1 and 2 which is to be objectively preferred over the other?

Are there any pro and cons of 1 vs 2?

<select name="language" id="language" value="ENG">
  <option>ITA</option>
  <option selected="selected">ENG</option>
  <option>FRE</option>
</select>

<div class="language">
  <input type="radio" id="italian" name="fav_language" value="ita">
  <label for="italian">Italiano</label><br>
  <input type="radio" id="english" name="fav_language" value="eng" checked="checked">
  <label for="english">English</label><br>
  <input type="radio" id="french" name="fav_language" value="fre">
  <label for="french">Français</label><br>
<div>

¹ I've obtained this static image via a <ul> with 3 <svg>s inside a corresponding <li>, so I haven't bothered adding something like an external shadow to mark the selected language, but I'd do it at some point.

Enlico
  • 23,259
  • 6
  • 48
  • 102

1 Answers1

1

As you want to freely style your language selector by means of showing all options at the same time through flag images I think none of the above options are the best choice. There's no need to get complicated. Try a div and a links solution to better fit your goal.

Something like </div><ul class="languages"><li class="nav-item"><a href="#english">English /a></li><li class="nav-item"><a href="#french">french</a></li></ul>

SIMBIOSIS surl
  • 357
  • 3
  • 15
  • Does using `select` and `option` in the HTML prevent me from obtaining the result in the figure via CSS? – Enlico Aug 22 '21 at 10:35
  • I don't understand your point. What do you mean by "prevent me from obtaining the result in the figure via CSS"? You can use `CSS` to style almost anything within `html` markup, `select` and `option` are not an exception as long as I know. – SIMBIOSIS surl Aug 22 '21 at 10:37
  • The image in my question clearly shows and tells you that I want to show **both/all** the options all the time at the top right of the page. I'll make it even clearer. Does the `select`+`option` approach allow showing all options all the time? – Enlico Aug 22 '21 at 10:41
  • 1
    You mean to show a clickable image for each language option? If it's what you want to achieve, and sorry for not understanding that from the beginning, I think you can't do that if you use `select`. But it would be also difficult to use inputs and would need to style very hard to be shown as you want. Why not using `div ` and `a` links instead? – SIMBIOSIS surl Aug 22 '21 at 10:46
  • Ok, thanks for confirming that. I start to think that to have full freedom, one has to rely fully on CSS and use only simple stuff in HTML. – Enlico Aug 22 '21 at 10:48
  • Something like this ` ` – SIMBIOSIS surl Aug 22 '21 at 10:50
  • Yeah! There's no need to get complicated when you can obtain the same or better results using simple `html` and `css`. I will update the answer to let it clear according to your question. – SIMBIOSIS surl Aug 22 '21 at 10:53
  • Would you consider, if my answer really was useful to you, to select it as the accepted one? – SIMBIOSIS surl Aug 23 '21 at 18:39
  • Your answer is partly useful, but I feel, as it is now, it's essentially just food for thoughts. Which is good, sure, but it's far from being an answer, imho. – Enlico Aug 23 '21 at 19:54
  • Well, that's your opinion. Anyway you are in better position than before. Don't worry, I am not here looking for reputation but just trying to help people who are in trouble as I been before or as I am right now. I am glad of being able to help you somehow. – SIMBIOSIS surl Aug 23 '21 at 20:11