unable to change search box attribute

581 Views Asked by At

I tried tweaking the CSS coding and no prevail. Things i want:

  • search box with border radius of 5px
  • enlarge the search icon with out getting it dispalced
  • both search box and search icon evenly placed around the div

HTML CODE:

        <div class="search"
        <div class="searchbox">
            <form action="/search" method="get" class="search_form">
            <input type="text" value="Search Blog..." class="search_text" name="q">
            <input type="image" src="http://s25.postimg.org/d3fu892zz/search_button_without_text_md.png" height="20" width="20"class="button">
            </form>
        </div>
    </div>

CSS CODE:

.search{position:fixed;
    height:25px;
    width:194px;
    top:189px;
    left:14px;
    border:2px solid black;
    background-color:black;
    border-radius:10px;
    padding-left:2px;
    padding-bottom:4px;
    opacity:.8;}
1

There are 1 best solutions below

1
On BEST ANSWER

Notice: Your class="search" div is not closed !!

Here is the code that should work and fullfill all the three conditions of yours

<div class="search">
<div class="searchbox">
    <form action="/search" method="get" class="search_form">
        <input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://i42.tinypic.com/fayl43.png" class="button">
    </form>
</div>

Css Code:

.search{position:absolute;
height:28px;
width:190px;
top:140px;
left:100px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;
}

form#input{
    display:inline-block;
}

.searchbox{

}

.search_text{
    margin-top:4px;
    margin-left:5px;
    border-radius:5px;
    text-align:center;
}

.button{
    margin-top:5px;
    margin-left:2px;
    position:absolute;
    height:20px;
    width:20px;
}
.button:hover{
    -webkit-transform:scale(1.3);
            -moz-transform:scale(1.3);
            -o-transform:scale(1.3);
            opacity: 3;

}

Working JSfiddle Demo - http://jsfiddle.net/vg8Mn/

Hope this helps :)