HTML hide select tag inside button tag

Question

I want the select options to show up when you press a button but not have the bar showing the selected option to appear inside the button.

This is what i have so far:

<!DOCTYPE html>
<html>
<body>

<button>
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</button>
  
</body>
</html>

This is what I want it to look like, then I will place an image inside the button

<!DOCTYPE html>
<html>
<body>

<button>
<select style="display: none;">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
</button>
  
</body>
</html>

@BramVanroy it is valid HTML, however I don't understand the logic of having the `select` field...inside of a button... — m_callens, Jun 27 '16 at 15:33
@m_callens the idea is to run it on mobile, so I can have the options pop up and then selected from a smaller button that fits in to the design of the applicaiotn — Lawtonj94, Jun 27 '16 at 15:35
@m_callens If you run it through a validator, you'll see that it is not valid. — Bram Vanroy, Jun 27 '16 at 15:37
@BramVanroy it runs I am not to worried about the validity of it, until after I know there is a way to do what I want — Lawtonj94, Jun 27 '16 at 15:38
@BramVanroy ok fair enough, the invalid parts I saw where the missing `` and that `select` cannot be a descendant of `button` — m_callens, Jun 27 '16 at 15:38
@m_callens if select can not descend from button is there away to replace what the standard select appearance is to an image? — Lawtonj94, Jun 27 '16 at 15:42
@JacobLawton If you want to change the appearance of core HTML components, learn CSS and/or use a framework like `bootstrap` or `semantic-ui` — m_callens, Jun 27 '16 at 15:45
@m_callens so your saying that I can not hide the select display? — Lawtonj94, Jun 27 '16 at 15:50
Possible duplicate of [How to change colour of blue highlight on select box dropdown](https://stackoverflow.com/questions/19388011/how-to-change-colour-of-blue-highlight-on-select-box-dropdown) — Sᴀᴍ Onᴇᴌᴀ, Aug 14 '17 at 01:30

Bram Vanroy · Answer 1 · 2016-06-27T17:09:45.277

2

$("#btn, .close").click(function() {
  $(".select-wrapper").toggleClass("active");
});

.select-wrapper {
  display: none;
  position: fixed;
  width: 100vw;
  height: 100vw;
  top: 0;
  left: 0;
  z-index: 10;
  background: rgba(0,0,0,0.3);
}

.select-wrapper select {
  font-size: 24px;
  position: absolute;
  left: 50vw;
  transform: translateX(-50%);
}

.select-wrapper.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="image" src="http://lorempixel.com/120/60/" id="btn">
<div class="select-wrapper">
  <input type="button" value="close" class="close">
  <select>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
</div>

edited Jun 27 '16 at 17:09

answered Jun 27 '16 at 15:34

Bram Vanroy

27,032
24
137
239

I want to use a button with an image on it, and the selected option is still displayed which will ruin the layout I have – Lawtonj94 Jun 27 '16 at 15:37
What do you mean with "the selected option is displayed"? How else would a user know what they have selected? – Bram Vanroy Jun 27 '16 at 15:38
I will give it an ID then get the value in javascript from the id, the displaying part is not important. I have tried the "style = display: none" but that makes it so the options do not show up either – Lawtonj94 Jun 27 '16 at 15:41
It is not at all clear what you want. Provide an image of what you want if possible. – Bram Vanroy Jun 27 '16 at 15:44
I have edited the question it has an example of what I would want – Lawtonj94 Jun 27 '16 at 15:48
It doesn't. What *behaviour* do you expect? What do you need to happen when someone clicks the button? – Bram Vanroy Jun 27 '16 at 15:51
It to show the select options, if you run this on a mobile browser, it brings up the options as a pop out, that is what I want to happen I just don't want the box with ("Volvo" ect) to be displayed inside the button – Lawtonj94 Jun 27 '16 at 15:53
So you want that when someone clicks the button, the select becomes visible, like, below the button? – Bram Vanroy Jun 27 '16 at 16:02
just the options, so if you look at select on a mobile device it opens as a pop out (like an alert box), I want it to do that. I am not worried about its desktop functionailty – Lawtonj94 Jun 27 '16 at 16:07
See my edit. This should give you enough information to start with. – Bram Vanroy Jun 27 '16 at 17:10

score 0 · Answer 2 · answered Aug 14 '17 at 00:13

I encountered similar problem that the dev refused to just use list due to some backend issue.

found a simple cheat to make the select tag show all the options, that look like a dropdown, and then I just toggle the whole select tag. Not exactly what you asking for, but looks like it.

$("#btn, .selector").click(function() {
  $(".select-wrapper").toggleClass("active");
});

.select-wrapper{
  display: none;
  }
  
  
.select-wrapper.active {
  display: block;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

add variable:
<br>
<input type="button" value="add" id="btn">
<div class="select-wrapper">
<select size="4" class="selector">
  <option>Apple</option>
  <option>Pear</option>
  <option>Banana</option>
  <option>Orange</option>
</select>
</div>





</body>

HTML hide select tag inside button tag

2 Answers2