CODEWITHSUNDEEP
htmlcsstextfield
Sam Clark
Sam Clark

Reputation: 429

How to Create Rounded Search Box

I have a div with a size of 190x30 pixels, and a background image of the same. The background image is a rounded rectangle and it looks good. When I put the text field in the div, the background repeats vertically, so for some reason, the search box is requiring 60 px of vertical space... WHY? I should add that in DreamWeaver it appears correctly, but in Chrome or IE, it doesn't.

Upvotes: 5

Views: 54901

Answers (5)

grandebiengrande
grandebiengrande

Reputation: 1

I think it's better in this way:

<input placeholder="Search..." type="search" value="" id="search"
         onchange="openPage()">

<script>
    function openPage() {
        var x = document.getElementById("search").value;

        if (x === "Home") {
            window.open("home.html");
        }

        if (x === "About") {
            window.open("about.html");
        }
    }
</script>

Upvotes: 0

JustA13YearOld
JustA13YearOld

Reputation: 19

You could do this:

CSS:

.example input[type=text] {
       border-radius: 25px;
      }

HTML: 

<div class="example">
         <input type="text" placeholder="Search..">
       </div>

Here's a fiddle to see how it looks like:

.example input[type=text] {
  border-radius: 25px splid;
}
<!DOCTYPE html>
<html>

  <head>
  </head>
    <body>
      <div class="example">
    <input type="text" placeholder="Search...">
  </div>
    </body>

</html>

Upvotes: 0

Jhilom
Jhilom

Reputation: 1028

You may try this CSS

#divName { background:url("image-src) no-repeat; height:30px; width:190px; }

HTML

<div id="divName"><input type="text" ></div>

And you may put anything inside the div "divName"

Upvotes: 0

KBN
KBN

Reputation: 2974

CSS: 

.round {
    width: 100%;
    border-radius: 15px;
    border: 1px #000 solid;
    padding: 5px 5px 5px 25px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}

.corner {
    position: absolute;
    top: 3px;
    left: 5px;
    height: 20px;
    width: 20px;
    z-index: 10;
    border-radius: 10px;
    border: none;
    background: #000; /* Set the bg image here. with "no-repeat" */
}

.search {
    position: relative;
    width: 190px;
    height: 30px;
}

HTML :

<form id="search-form">
    <div class="search">
      <input type="text" name="search" class="round" />
      <input type="submit" class="corner" value="" />
    </div>
</form>

Demo : http://jsfiddle.net/Bh4g3/

Upvotes: 7

Joe Mornin
Joe Mornin

Reputation: 9134

To prevent the background from repeating, use this CSS declaration:

#element {
    background-repeat: no-repeat;
}

Upvotes: 2

Related Questions