css使用背景图片制作搜索框

来源：互联网发布：手机相册制作软件编辑：程序博客网时间：2024/05/17 00:10

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>使用图片制作搜索框</title><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"><style>.searchCon {width: 330px;height: 35px;background: url(images/search.jpg) no-repeat;position: relative;}.searchCon input.inputText{width: 235px;height: 24px;line-height: 24px;position: absolute;top: 4px;left: 5px;border: 0;border: none;background: none;}.searchCon input.inputButton {width: 73px;height: 33px;position: absolute;left: 257px;top: 1px;cursor: hand;cursor: pointer;/* filter: alpha(opacity: 0);opacity: 0;  */border: 0;/*隐藏默认属性*/background: none;   /*隐藏默认属性*/}</head><body>    <div class="searchCon">    <input type="text" class="inputText">    <input type="button" class="inputButton">    </div>    <!--使用背景图片的搜索框思路      使背景图片中的输入框和搜索按钮与实际输入框和搜索按钮的位置重合，在完成输入框和搜索按钮的尺寸、文本的调整后，使得一切边框皆为0、一切挡住背景图片的元素均为透明即可。  -->  </body></html>

1 0