unable to change search box attribute

Question

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

I dont see many of classes defined in HTML code, in your CSS e.g.class="search_form" class="search_text" class="button" Also in your code for button there should be a space character before class="button" — Usman Waheed, Dec 23 '13 at 06:59
hello. yes that was my problem. i have so much classes and id i don't know which one is for which. but I got it now. thank you! i just have to remember the specific classes and ids so i don't mix them up — Lo_MAT, Dec 23 '13 at 07:32

score 0 · Accepted Answer · answered Dec 23 '13 at 07:35

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 :)

the "search blog..." centered makes it even neater! thank you — Lo_MAT, Dec 23 '13 at 07:49

unable to change search box attribute

1 Answers1