Select tag with no drop down options

Question

I'm trying to create a select tag with no drop down options

I need the appearance as the first output (no drop down) but with only one option, so that I can toggle the options without pulling a drop down list.

I tried setting height to the select tag but its not working.

My problem is not about hiding the first element, I don't want to pull a drop down list for options I need to toggle the options.

/*.scrollable{height:25px;}*/

.scrollable{margin-right:25px;}

<select size="2" class="scrollable">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

<select size="1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Is this even possible by only using html & css (and also any scripts if possible) ?

Possible duplicate of [HTML select: how to set default text which won't be shown in drop-down list?](https://stackoverflow.com/questions/9447134/html-select-how-to-set-default-text-which-wont-be-shown-in-drop-down-list) — JoelDoryoku, Aug 28 '18 at 11:04
Can you expand on your description, it is not super clear to me what your intended functionality is. — Mark Schultheiss, Aug 28 '18 at 11:05
@JoelDoryoku my problem is not about hiding the first child kindly reread the question — Viira, Aug 28 '18 at 11:07
"I need to toggle the options." - does that mean you need to add/remove them or to force the dropdown to be open at the start? You also say "no dropdown options" - so a select with no "option" elements? your examples have those so I guess that is not what you meant there. — Mark Schultheiss, Aug 28 '18 at 11:08
What you are asking is *Impossible* with HTML/CSS only, Please see https://stackoverflow.com/questions/570642/height-of-an-html-select-box-dropdown — Rafael Herscovici, Aug 28 '18 at 11:13

Rick · Accepted Answer · 2018-08-28T11:56:13.810

- HTML only (semi) solution

Assuming you want to use numbers like you do in your example, you can also use an input field with a number type.

I've included some CSS to always show the arrows in Chrome. In other browsers, the arrows are always shown.

Beware that this only works for numbers, not strings or other types.

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {  
   opacity: 1;
}

<input value="1" min="1" max="9" type="number" style="width:30px"/>

- Javascript solution

This solution involves a bit of simple Javascript, but works with strings too. You can style the <div> tags however you'd like so they resemble up and down buttons, that's up to you.

var options = [ "Orange",  "Kiwi", "Banana", "Strawberry", "Pear" ]

// The current index of the options array
var current = 0;

// This function removes 1 from the currently selected option index and sets the field value
function prev(){
  if(current > 0) current--;
  setFieldValue(options[current]);
}

// This function adds 1 to the currently selected option index and sets the field value
function next(){
  if(current < options.length-1) current++;
  setFieldValue(options[current]);
}

function setFieldValue(text){
  document.getElementById("field").value = options[current];
}

// Call the method so the field doesn't start out empty
setFieldValue(options[current]);

div.button {
  display: block;
  position: absolute;
  width: 20px;
  height: 10px;
  text-align: center;
  background-color: gray;
  color: white;
  line-height: 10px;
  cursor: pointer;
}

div.button:hover {
  background-color: lightgray;
}

div.one {
  right: 0;
  top: 0;
}
div.two {
  right: 0;
  bottom:0;
}

div.field-wrapper {
  display: inline-block;
  position: relative;
}


input#field {
  background-color: white;
}

<div class="field-wrapper">
  <input id="field" disabled/>
  <div class="button one" onclick="prev();">^</div>
  <div class="button two" onclick="next();">v</div>
</div>

This will work only for numbers, Which is why i asked you if the list is numbers only where you answered "Yes @Dementic but for only for now." — Rafael Herscovici, Aug 28 '18 at 11:14
Yes I said @Dementic but I was expecting an answer atleast for numbers. — Viira, Aug 28 '18 at 11:15
Added a Javascript solution for when you want to use strings instead of numbers. — Rick, Aug 28 '18 at 11:31
can we enclose the next option and previous option inside the box — Viira, Aug 28 '18 at 11:39
@Viira You might be able to do so with some absolute positioned buttons. — Rick, Aug 28 '18 at 11:42
@Viira I've added some CSS to enclose the buttons in the box using a wrapper div. — Rick, Aug 28 '18 at 11:50

score 0 · Answer 2 · answered Aug 28 '18 at 11:04

This code here for you:

<select>
<option disabled selected value> -- select an option -- </option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>

-- select an option -- Will be displayed by default. But if you choose an option,you will not be able select it back.

You can also hide it using by adding an empty option

so it won't show up in the list anymore.

Select tag with no drop down options

2 Answers2

- HTML only (semi) solution

- Javascript solution