如何创建完全像输入文本框的跨度

Question

我想创建完全像输入文本框一样的跨度，但在跨度内，它是一个href链接。

请指教。

Answer 1

我不确定为什么你想通过使a标签看起来像input来“欺骗”用户，但我相信你的推理是光荣的。李斯特先生有一个很好的评论，不同的浏览器渲染input的方式不同。既然如此，我认为你最好的选择是在something like this (the first in the example is a link, the second a real input to compare)之间获得跨浏览器的效果。

我只在FF中测试过。我将a中文字的不透明度设置为rgba以隐藏它，但为了搜索引擎的目的而保留它（所以就搜索引擎而言，您不仅仅有一个空的a标签）。在使用“真实”input来实现外观时，它添加了非语义html，但它确实可以更好地跨浏览器呈现该框。

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