当前位置: 动力学知识库 > 问答 > 编程问答 >

html - creating customized search box

问题描述:

I am trying to create a customized search box. I tried the following but getting weird results.

this is my css code

.inputboxSearch {

margin: 0 0 1em 0;

border: 1px solid #333333;

background:url('images/searchbox.png') no-repeat;

padding-right:20px;

}

where, searchbox.png is a full a image (180*30 png) of a searchbox. Then i have tghe following code.

<input class="inputboxSearch" type='text' name='search' size='25'/>

But, how it appears is that, the search box image comes inside of the input box, and it is only half displayed. Rest is not visible. But wat i expected was, the search box should encompass the input box. The revers is happening here anyways. How to solve this

网友答案:

Set .inputboxSearch border to none, and increase its height to 30px:

.inputboxSearch {
    background: url("images/searchbox.png") no-repeat scroll 0 0 transparent;
    border: none;
    height: 30px;
    margin: 0 0 1em;
    padding-right: 20px;
}
分享给朋友:
您可能感兴趣的文章:
随机阅读: