问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

将输入和选择合并到一个可见的输入字段中

社区维基
1
新手上路，请多包涵

我不熟悉 html 元素的样式（例如本例中的输入和选择），我希望实现一个视觉组合的输入/选择元素。本质上，输入和选择仍然作为表单元素完全分开，但基于类和 css，我想将选择菜单的内容插入输入字段的右侧。对不起，我不是 photoshoper，所以这里是它可能看起来像的表示：

  ------------------------------------------------
 |                              Select text [v] |
 ------------------------------------------------

正如您所看到的，输入的左侧部分是您为输入元素键入字符串的位置，选择下拉菜单插入到输入元素的边框中（[v] 应该是向下箭头按钮删除列表）。欢迎任何关于如何获得这样的样式或建议的链接。

原文由 somecallmemike 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryhtmlcssinput
阅读 565
1 个回答
得票最新
社区维基
1

下面的例子非常简单。它显示了您想要做的主要事情：因为表单元素可以像其他所有元素一样使用 CSS 设置样式，所以它非常简单。这个例子在非firefox浏览器上还有一些样式问题，我会稍微改进一下。

 <html>
<head>
    <style>
        select#selectoption {
            border-left:none;
            padding:none;
        }

        input#datahere {
            position:relative;
            border-right:none;
            padding:none;
        }
        </style>
    </head>
<body>
    The form below is a simple example.
<form name ="explanation"action="test" method="post">
<input type="text" id="datahere" />
<select id="selectoption" /><option>test</option><option>test2</option></select>

</form>

</body>
</html>

编辑：可以在这里看到您想要的在线示例：http: //jsfiddle.net/xFQMf/3/

原文由 Qqwy 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题