开发者

How does Wikipedia make its search field?

I would like to know how Wikipedia does its search field. What I mean by this is two things: Its gradient and its button.

How does it make a gradient in the field? This can be easily done with CSS cross browser at this point, but when you do the IE CSS code, it aliases the text. Wikipedia has a grad开发者_开发百科ient background, but the text is still anti-aliased! How do they do that?

Also, how did they put a clickable search button INSIDE the text field?

Thanks.


It appears that the actual search input has no styling -- meaning no border and a transparent background. The containing div is styled to look like an input field (border and gradient). The clickable button is inside the div but not inside the actual input element.


You could just look at the code. The search box as it appears is only a div element with a border. This div itself has the gradient set via CSS (background-image). As you can see the button element is also not inside the text field.

<div id="simpleSearch">
    <input id="searchInput" name="search" type="text"  title="Search Wikipedia [f]" accesskey="f"  value="" />
    <button id="searchButton" type='submit' name='button'  title=""><img src="[x]" alt="Filltext" /></button>
</div>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜