如何創建完全像輸入文本框的跨度

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