执行输入类型=“文本”与CSS3和背景上的固定图像 [英] Doing a input type="text" with CSS3 and fixed image on the background

问题描述

我正在开发我的第一个HTML5 / CSS3网站，我想做所有我可以正确地，以良好的方法和可用也。

I am developing my first HTML5 / CSS3 website and I want to do all I can correctly and with well methods and being usable too.

我必须重现下一个搜索输入：

I have to reproduce the next search input in this website:

我不知道该怎么做是为了实现图像的背景，或者如果图像需要是 input type =image/> 。

What I don't know how to do it is to implement the background of the image, or if the image needs to be a <input type="image" />.

现在，我是下一个：

#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 input with the same radius and all the area is input text. There is no space for the magnifying glass and if it was a background the image can not be clicked. In this point, what is best? Let the input only triggered by or... how will you do it?

无论如何，请告诉我。

提前感谢！

推荐答案

您可以使用带有背景图像的提交按钮，

You can use a submit button with a background-image and position it over the searchbox.

不要忘记在输入框右侧添加填充，以允许按钮没有重叠。 （ ）

Do not forget to add padding to the right of your input box to allow for the button without overlap. (i have also added a class to your search box so the rules do not target the same elements)

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

最终结果是

demo < a href =http://jsfiddle.net/gaby/F5Nmp/1/ =noreferrer> http://jsfiddle.net/gaby/F5Nmp/1/

这篇关于执行输入类型=“文本”与CSS3和背景上的固定图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！