Question

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

Answer 1

使用包装器

您所指的技术通常没有文本框内的按钮，按钮和文本框的边框和背景只是与包装div混合。这是一个基本的例子：

jsFiddle

enter image description here

<强> 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

enter image description here

.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 */
}

Answer 2

这不一定是你最好的方式。但是，这就是你要求的。看看这个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;    
}

Answer 3

您可以在文本框中放置<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.

您可以注意到，搜索按钮的边框，背景颜色，边框宽度应与搜索字段的默认设置匹配。

Here is a JSFiddle example.

Answer 4

简单的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>

enter image description here

搜索框与文本框中的按钮

4 个答案:

使用包装器

使用`position:absolute`

搜索框与文本框中的按钮

4 个答案:

使用包装器

使用position:absolute

使用`position:absolute`