CODEWITHSUNDEEP
htmlselecthtml-select
naveen
naveen

Reputation: 31

Show HTML select value

I want show all select box values like first image first image. But firefox show like second imagesecond image. how to solve this

#mySelect
{
	width:300px;
    height:200px;
    overflow:hidden;
}
#mySelect option
{
	float:left;
    border:1px solid #000;
    display:inline;
 }
<form>
  <select id="mySelect" size="4">
    <option>Apple</option>
    <option>Orange</option>
    <option>Pineapple</option>
    <option>Banana</option>
     <option>Orange</option>
    <option>Pineapple</option>
    <option>Banana</option>
  </select>
</form>

Upvotes: 0

Views: 69

Answers (3)

user7130557
user7130557

Reputation:

According to this article on Mozilla.org (https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms)- some form widgets (like the select element) are difficult or impossible to style without encountering browser issues (like you did with firefox)

You can skip over most of the article but note the section where it starts with "Dealing with the select nightmare" - They show some ideas to resolve your issue there.

To quote the article: "If you want to gain full control over form widgets, you have no choice but to rely on JavaScript."

The following article can also help: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets

Upvotes: 0

Richard Werkman
Richard Werkman

Reputation: 78

I would recomend using flexbox instead of float.

Css tricks has a great guide on how to use flexbox

Something like (not tested)

#mySelect {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-between;
}

Upvotes: 1

Bmd
Bmd

Reputation: 1318

I think if you change display:inline on your #mySelect option to display:inline-block that might give you what you're looking for. If that doesn't work, you could also play with the word-wrap CSS property.

It's worth noting that you will have a different appearance in other browsers... (I left the code snippets in as proof that I reproduced your example exactly)

In Chrome it looks like this: chrome screen capture

and in Safari (the default browser on Mac OS) it looks like this: enter image description here

Upvotes: 0

Related Questions