html - 如何像输入文本框一样创建跨度

Question

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

请指教。

Answer 1

我不确定您为什么要通过使a标签看起来像来“欺骗”用户input，但我相信您的推理是可敬的。Lister 先生有一个很好的评论，即不同的浏览器呈现input不同的内容。既然如此，我认为获得在跨浏览器上运行良好的东西的最佳选择是这样的（示例中的第一个是链接，第二个是要比较的真实输入）。

我只在FF中测试过。a我在through 中设置了文本的不透明度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;
}