Question

我有一个要求，我需要通过组合文本框和下拉列表来显示一些数据。它看起来像一个文本框，左侧部分是文本框，右侧是下拉列表。单击下拉列表时，将显示大小等于文本框和下拉列表的选项。

<span class="class1" style="display: inline-table;"> 
            <span class="class2"> 
                <input class="class3" type="text" style="margin-left: 0; box-shadow: 0 0 0 0; border-right: 0" name="topFrameSearchValue" id="topFrameSearchValue"/>
            </span> 
            <span class="class4">
            <ul id="menu">
                <li class="class5"><a href="#">Recent</a>                   
                        <ul class="sub-menu">
                            <li>
                                <a href="#">Sub Menu 1</a>
                            </li>
                            <li>
                                <a href="#">Sub Menu 2</a>
                            </li>
                         </ul>

                </li>
            </ul>
            </span>
        </span>

我成功加入了文本框和下拉列表，但无法将其大小扩展到文本框。

链接到显示设计的图像： i57.tinypic.com/do464n.png

创建了一个jsfiddle：Jsfiddle

Answer 1

使用datalist标签。它是HTML5中的新元素。这是代码 -

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
    <option value="Internet Explorer">
    <option value="Firefox">
    <option value="Chrome">
    <option value="Opera">
    <option value="Safari">
</datalist>
</form>
</body>
</html>

Answer 2

使用以下代码管理以形成此Ui：

HTML：

 <div id="container" style="display:inline;">
        <input id="topFrameSearchValue" name="" type="" style="width: 95px;border:0px solid #000000;">

        <select id="searchHistory" name="" style="width: 180px;" onChange="updateTopFrame()">
        </select>
        </div>

CSS：

   #container
  {
position: relative;
margin-top: -5px;
padding-bottom: 3px;

}

#topFrameSearchValue
{
position: absolute;
top: 0;
left: 0;
z-index: 999;
padding: 0;
 margin-left: 2px;
margin-top: 1px;
font-family: Arial, Helvetica, sans-serif;
font-size: 9pt;
outline: none;

}

 #searchHistory
 {
 position: absolute;
 top: 0;
 left: 0;
 margin: 0;
 text-align:right;
 color: #999999;

-webkit-appearance:none;
-moz-appearance:none;
  display: inline-block;
 border-color: #cccccc;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 7pt;
 outline: none;
 }

使用html / css将下拉菜单与文本框结合使用

2 个答案: