Geek asks and answers

Doing input type = "text" with CSS3 and a fixed image in the background

I am developing my first HTML5 / CSS3 website, and I want to do everything I can, correctly and with good methods, and be useful.

I need to reproduce the following entry to search on this website:

Search box

What I do not know how to do is to implement the background of the image, or if the image should be <input type="image" />.

At the moment, I am as follows:

#header-search input {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border:1px solid #8e8e8e;
    background-color:#f5f5f5;
    height:16px;
    padding:4px;
    color:#4a4a4a
}

This creates an entrance with the same radius, and the entire area is entered. There is no room for a magnifying glass, and if it was a background, the image cannot be pressed. At this point, which is better? Let the input only start or ... how do you do it?

In any case, you will do it, please tell me.

Thank you in advance!

+3
source share
3

.

, . ( , )

Html

<form id="header-search">
    <input type="text" class="searchbox" /><input type="submit" class="button" value="" />
</form>

Css

#header-search{overflow:auto;}

#header-search input.searchbox {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     border:1px solid #8e8e8e;
     background-color:#f5f5f5;
     height:16px;
     padding:4px;
     padding-right:28px;
     color:#4a4a4a;
     float:left;
 }

#header-search input.button{
    border:0;
    padding:0;
    margin:0 0 0 -24px;
    width:24px;
    height:24px;
    background:transparent url('your-search-icon-path-here') center center  no-repeat;
    float:left;
}

enter image description here

demo http://jsfiddle.net/gaby/F5Nmp/1/

+10

:

background-image : url(path/to/your/image/relative/to/css/file) no-repeat;
background-position : right;


<input type="image"/> <!-- this can be used to replace a submit control
                           for example, but not what you need I think -->

CSS ( )

#header-search input[type="text"]
0

, , - , , :

#header-search, button {
    display: inline-block;
    vertical-align: baseline;
    border:1px solid #8e8e8e;
    background-color:#f5f5f5;
    height:30px;
    padding:4px;
    color:#4a4a4a;
    margin: 0;
    float: left;
}
#header-search {
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
    border-right-width: 0;
}
button {
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
    border-left-width: 0;
}

( button type="submit" , ...):

<input type="search" id="header-search" />
<button type="submit">
    <img src="http://davidrhysthomas.co.uk/linked/search.png" />
</button>

JS Fiddle demo.

Note. Remember that for an unknown reason, I used idof #header-searchfor myself input, and not for the parent element. Therefore, your selector must be changed from the one I used in the above example.

Edited because it looked wrong, with the outline, in focus, after the search rectangle input(check out the original JS Fiddle demo ). So, I replaced the color-changing scheme to bordermake it look a little more “natural”:
#header-search:focus {
    border-color: #f90;
    border-right-width: 0;
}

#header-search:focus + button[type=submit] {
    border-color: #f90;
    border-left-width: 0;
}

Revised JS Fiddle Demo .

0
source

More articles:


All Articles