16

我想创建一个里面有一个按钮的文本框，就像我在某些网站上看到的那样，通常有一个文本框，在右上角有一个带有手镜图像的按钮，当点击按钮时，表单被提交。我曾尝试使用 div 创建类似的东西，但我似乎没有得到它。它是如何用 css 完成的，或者它有一些 jquery 魔法吗？

4

4 回答 4

43

使用包装器

您所指的技术实际上通常在文本框中没有按钮，按钮和文本框的边框和背景只是与包装器 div 混合在一起。这是一个基本示例：

jsFiddle

在此处输入图像描述

HTML

<div class="wrapper">
    <input type="text" />
    <button>GO</button>
</div>

CSS

.wrapper {
    border:1px solid #000;
    display:inline-block;
}

input,
button {
    background-color:transparent;
    border:0;
}

使用position:absolute

另一种方法是绝对定位按钮并将其附加到右侧。这样做的一个好处是您可以更轻松地在文本框周围实现焦点/活动边框。padding-right您可以通过提供文本框来绕过按钮问题下的文本。

jsFiddle

在此处输入图像描述

.wrapper {
    border:1px solid #000;
    display:inline-block;
    position:relative;
}

input,
button {
    background-color:transparent;
    border:0;
}

button {
    position:absolute;
    right:0;
    top:0;
}

input {
    padding-right:30px; /* button padding */
}
于 2013-04-03T06:08:14.447 回答
1

这不一定是您最好的方式。但是，这就是您所要求的。看看这个 jsFiddle。使按钮位置：绝对；

http://jsfiddle.net/j8bbj/

<input type="text" />
<button>si</button>



input[type="text"]
{
    width:200px;
    height:40px;
}

button
{
    position:absolute;
    left:165px;
    top:10px;    
}
于 2013-04-03T06:14:12.697 回答
0

您可以将 a<button>放在文本框内，但它看起来不太好。搜索框就在您认为它位于文本框内的文本框旁边。我使用了这个 HTML 代码：

<input type="search">
<input type="button" value="Search" id="mySearch">

和CSS：

#mySearch {
margin-left: -4px; // I put margin-left -4px because the left border of the button will be in contact with the search box's right border. This will make it look like the button is right inside the input field but it's not.
border-width: 1px; // border-width: 1px; because the input's default border-width is 1px.
background-color: white; //White because the input's default background-color is white.
border-color: black; //Black because the input's default border-color is black.



如您所见，搜索按钮的边框、背景颜色、边框宽度应与搜索字段的默认设置相匹配。

这是一个 JSFiddle 示例。

于 2016-03-04T19:15:25.350 回答
0

简单的 CSS 代码使其成为可能：

<!DOCTYPE html>
<html>
<title>Search</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

<body>
<br>
<div class="w3-container" style="position:relative">
  <form action="yoursearch.php" method="post" enctype="multipart/form-data">
  <input type="text" class='w3-input w3-border' name='sendmsg' id='sendmsg'  required placeholder="type search here">
  <button  class="w3-btn w3-blue w3-border  w3-round-xlarge " style="position:absolute;top:2px;right:16px;" >Go</button>
  </form>
</div>

</body>
</html>

在此处输入图像描述

于 2016-06-30T13:34:08.543 回答