显示选择选项作为选项卡

我有在drupal.I创建选项的选择框我想在单行中选择选项。现在oprion列出一个由one.need列出所有选项没有下拉显示选择选项作为选项卡

#edit-type-1{ 
 
    width:500px; 
 
} 
 
#edit-type-1 option{ 
 
    display:inline; 
 
    width:auto; 
 
}

<select id="edit-type-1" name="type_1" class="form-select"> 
 
<option value="All">- Any -</option> 
 
<option value="blogs" selected="selected">Blogs</option> 
 
<option value="case_studies">Case Studies</option> 
 
<option value="whitepapers">Whitepapers</option> 
 
</select>

来源

2017-06-20 user3386779

您不能选择选项为单行，但你可以使其与列表样式和它与JavaScript的关系。 –

你可以举例 – user3386779

如果你用不同的HTML代码替换它，那么你仍然需要添加脚本功能，以便它仍然可以执行一个选择字段通常会执行的任务......如果你愿意，它可能会更有意义使用单选按钮从这里开始，而不是选择字段。技巧如何隐藏实际的单选按钮元素，并使用相应的标签来切换它们（并且如果需要，突出显示当前“选定”的一个），这些技术是广泛可用的，并且可以很容易地进行研究。 – CBroe

#edit-type-1{ 
 
    width:500px; 
 
} 
 
#edit-type-1 option{ 
 
    display:inline; 
 
    width:auto; 
 
} 
 
.form-select{ 
 
    display: inline-block; 
 
    height: 3em;  
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
} 
 

 
.form-select option{ 
 
    display: inline-block; 
 
    width: 9em; 
 
    height: 2.5em; 
 
    float:left; 
 
}

<select name="type_1" class="form-select" size="100" > 
 
<option value="All">- Any -</option> 
 
<option value="blogs" selected="selected">Blogs</option> 
 
<option value="case_studies">Case Studies</option> 
 
<option value="whitepapers">Whitepapers</option> 
 
</select>

请同时参阅链接 - Select option in single line

来源

2017-06-20 11:56:30 Dexter

中选择添加尺寸，如下图所示：

<select class="form-select" size="3"> 
    <option value="All">- Any -</option> 
    <option value="blogs" selected="selected">Blogs</option> 
    <option value="case_studies">Case Studies</option> 
    <option value="whitepapers">Whitepapers</option> 
</select>

添加以下的CSS：

.form-select{ 
    display: inline-block; 
    height: 3em;  
} 

.form-select option{ 
    display: inline-block; 
    width: auto; 
    height: 5px; 
    float:left; 
}

[Demo]

来源

2017-06-20 12:41:59

显示选择选项作为选项卡

回答

相关问题