How do I add a “search” button in a text input field?

前端未结

关注

 7  1369

梦毁少年i

How do I create a similar “search” element to the one in this site?

$\"enter$

相关标签:

7条回答

猫巷女王i

2020-11-27 19:47
Your eyes are deceiving you. The button is not within the text box. Using a background image is NOT the way to go, as it wont provide the clickable submit button.

What you need to do is add a wrapper div around the input:text and input:submit

The wrapper will look like it's a text box, but will actually contain a transparent text box and a submit button. You'll need to specifically remove the styles for the input:text and input:submit elements
```
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>Input Example</title>
  <style type="text/css">
/* <![CDATA[ */

.search
{
  border: 1px solid #000000;
  width: 200px;
}

.search input[type="text"]
{
  background: none;
  border: 0 none;
  float: left;
  height: 1.5em;
  line-height: 1.5em;
  margin: 0;
  padding: 3px 0;
  width: 180px;
}

.search input[type="submit"]
{
  background: #CCCCCC url(path/to/image.jpg);
  border: 0 none;
  height: 1.5em;
  line-height: 1.5em;
  margin: 0;
  padding: 3px 0;
  text-indent: 100px;
  width: 20px;
}

/* ]]> */
  </style>
</head>
<body>
  <form ...>
    <div class="search">
      <input type="text" />
      <input type="submit" />
    </div>
  </form>
</body>
</html>
```
It's very important that you keep the submit button, otherwise hitting enter while searching will not have a default reaction. Additionally placing the submit button after the text field allows people to actually click on the button.

EDIT: you can make your own magnifying image, they're pretty easy to make in a 20x20px transparent png.
0 讨论(0)
发布评论:

提交评论
- 加载中...

上一页 1 2