Html 文本框/下拉组合

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6287617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:01:15  来源:igfitidea点击:

Textbox/Dropdown Combination

htmlcss

提问by Spencer

I'm trying to "combine" the textbox and dropdown box. I can't seem to get them lined up though.

我正在尝试“组合”文本框和下拉框。我似乎无法让他们排队。

enter image description here

在此处输入图片说明

My code:

我的代码:

<input name="" type="text" maxlength="50" style="width: 665px; padding:0px; z-index: 2; position: absolute;" />
<select name="" style="z-index: 1; width: 695px; padding:0px; position:absolute;">
    <option value="Value for Item 1" title="Title for Item 1">Item 1</option>
    <option value="Value for Item 2" title="Title for Item 2">Item 2</option>
    <option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>

采纳答案by RandomWebGuy

I've created a demo for you here: http://jsfiddle.net/aJaa6/

我在这里为您创建了一个演示:http: //jsfiddle.net/aJaa6/

*note that I changed the widths so it would fit in the panel.

*请注意,我更改了宽度以使其适合面板。

CSS:

CSS:

#container
{
    position: relative;
}

#input
{
position: absolute;
top: 0;
left: 0;
z-index: 999;
padding: 0;
margin: 0;
}

#select
{
position: absolute;
top: 0;
left: 0;
padding: 0;
margin: 0;
}

Markup:

标记:

<div id="container">
<input id="input" name="" type="" style="width: 100px;">
<br>
<select id="select" name="" style="width: 115px;">
<option value="Value for Item 1" title="Title for Item 1">Item 1</option>
<option value="Value for Item 2" title="Title for Item 2">Item 2</option>
<option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>
</div>

回答by Michael Robinson

Have you considered using FlexBox? It accomplishes what you want and has a lot of nice customizable features.

你考虑过使用FlexBox吗?它可以完成您想要的功能,并具有许多不错的可定制功能。

回答by vanval

If you don't want to mess around with absolute positions here is a way where if you click on the text box, it displays the drop down. I haven't added in the javascript to hide the dropdown when you click again, but it should be fairly easy to do.

如果您不想弄乱绝对位置,这里有一种方法,如果您单击文本框,它会显示下拉列表。当您再次单击时,我没有在 javascript 中添加隐藏下拉列表,但这应该很容易做到。

 <html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
   <script>
    function showDrop(){
        $('#select').attr('size',3);
        $("#select").show();
    }
    function populateTextBox(){
            var val = $("#select option:selected").text();
        $("#input").val(val);
    }
   </script>
    </head>
<body>
   <div id="container">
<input id="input" name="" type="" style="width: 100px;" onclick="showDrop();" />
<br>
<select id="select" name="" style="display:none;width: 100px;" onclick="populateTextBox();">
<option value="Value for Item 1" title="Title for Item 1">Item 1</option>
<option value="Value for Item 2" title="Title for Item 2">Item 2</option>
<option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>
</div>


</body>
</html>

回答by vivek raj

Can you try this code

你能试试这个代码吗



#input{ position:absolute; top:2; left:2; z-index:999; padding:0; margin:0; }
#select { position:absolute; top:0; left:0; padding:0; margin:0; }
<input id="input" type="text" style="width:100px;">
<select id="selectbox" style="width:123px;">
    <option value="Value for Item 1" title="Title for Item 1">Item </option>
    <option value="Value for Item 2" title="Title for Item 2">Item </option>
    <option value="Value for Item 3" title="Title for Item 3">Item 3</option>
</select>