选择标签，没有下拉选项

Question

我正在尝试创建一个没有下拉选项的select标签

我需要外观作为第一个输出（没有下拉列表），但是只有一个选项，以便我可以切换选项而无需拉出下拉列表。

我尝试将高度设置为选择标签，但无法正常工作。

我的问题不是隐藏第一个元素，我不想为需要切换选项的选项下拉列表。

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

仅使用html＆css（如果可能，还可以使用任何脚本）甚至可以实现？

Answer 1

-仅HTML（半）解决方案

假设您要像在示例中一样使用数字，则还可以使用数字类型的输入字段。

我提供了一些CSS，可以始终在Chrome中显示箭头。 在其他浏览器中，始终显示箭头。

请注意，这仅适用于数字，不适用于字符串或其他类型。

 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解决方案

该解决方案涉及一些简单的Javascript，但也适用于字符串。 您可以根据需要设置<div>标签的样式，以便它们类似于向上和向下按钮，这取决于您。

 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> 

Answer 2

此代码为您提供：

<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 -将默认显示。 但是，如果您选择一个选项，则将无法再次选择它。

您还可以通过添加一个空选项来隐藏它

因此它将不再显示在列表中。