Question

I want to create span exactly like an input textbox , but inside the span, it is a href link .

Please advise.

Answer 1

I’m not sure why you would want to “deceive” a user by making an a tag look like an input, but I will trust your reasoning is honorable. Mr Lister had a good comment that different browsers render input differently. That being so, I think your best bet at getting something that works fairly well cross-browser is something like this (the first in the example is a link, the second a real input to compare).

I only tested this in FF. I set the opacity of the text in the a through the rgba to hide it but keep it for search engine purposes (so you don’t just have an empty a tag as far as the search engines are concerned). In using a “real” input to achieve the look, it adds non-semantic html, but it does allow for better cross-browser rendering of the box.

HTML

<span class="fakeInput">
   <input type="text" value="Your link"/>
   <a href="#">Your link</a>
</span>

CSS

.fakeInput {
    position: relative;
    display: inline-block;
    margin: 1px;
}

.fakeInput input {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
    width: 100px;
}

.fakeInput a {
    position: relative;
    display: block;
    width: 100px;
    z-index: 1;
    text-decoration: none;
    color: rgba(256, 256, 256, 0); /*hide anchor text, let input show */
    border: 1px solid transparent;
}