html - 如何创建与输入文本框完全一样的跨度

Question

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

请指教。

Answer 1

我不确定您为什么要通过使 a 标签看起来像 input 来“欺骗”用户，但我相信您的推理是合理的. Lister 先生对不同的浏览器以不同方式呈现 input 发表了很好的评论。既然如此，我认为获得跨浏览器运行良好的东西的最佳选择是 something like this (the first in the example is a link, the second a real input to compare) .

我只在 FF 中测试过这个。我通过 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;
}