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>

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) ?

• javascript
• jquery
• html
• css

• are the values numbers? – Rafael Herscovici Commented Aug 28, 2018 at 11:03
• Yes @Dementic but for only for now. – Viira Commented Aug 28, 2018 at 11:03
• sometimes it can be strings – Viira Commented Aug 28, 2018 at 11:04
• Possible duplicate of HTML select: how to set default text which won't be shown in drop-down list? – JoelDoryoku Commented Aug 28, 2018 at 11:04
• Can you expand on your description, it is not super clear to me what your intended functionality is. – Mark Schultheiss Commented Aug 28, 2018 at 11:05

2 Answers 2

- 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 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.