CODEWITHSUNDEEP
htmlcss
Udo
Udo

Reputation: 1157

search box with button in textbox

i want to create a textbox that have a button inside of it just like i see in some sites, usually there is a textbox and at the right hand corner a button with a hand lens image and when the button is clicked the form is submitted. I have tried using divs to create something similar but i dont seem to get it. How is it done with css or are there some jquery magic to it ?

Upvotes: 16

Views: 71569

Answers (4)

rakesh soni
rakesh soni

Reputation: 1

Simple CSS code make it possible:

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

Upvotes: 0

1010
1010

Reputation: 221

You can put a <button> inside a text box but it would not look nice. The search box would be right next to the text box that you would think it is inside the text box. I used this HTML code:

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

And the 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.



As you can notice, the search button's border, background-color, border-width should match with the search field's default settings.

Here is a JSFiddle example.

Upvotes: 0

itsstephyoutrick
itsstephyoutrick

Reputation: 216

This is not necessarily how you would best do it. However, here is what you asked for. Check out this jsFiddle. Make button position:absolute;

http://jsfiddle.net/j8bbj/

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



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

button
{
    position:absolute;
    left:165px;
    top:10px;    
}

Upvotes: 1

Daniel Imms
Daniel Imms

Reputation: 50149

Using a wrapper

The technique you're referring to doesn't actually have the button inside the textbox normally, the border and background of the button and textbox simply blend in with a wrapper div. Here is a basic example:

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;
}

Using position:absolute

An alternative method is to position the button absolutely and attach it to the right. A benefit of this is that you can more easily implement the focus/active border around the text box. You can get around the text under the button issue by giving padding-right to the text box.

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

Upvotes: 44

Related Questions