So erstellen Sie span genau wie ein Eingabetextfeld

Question

Ich möchte span genau wie ein Eingabetextfeld erstellen, aber innerhalb der Spannweite ist es eine href-Verknüpfung.

Bitte beraten.

Answer 1

Ich bin mir nicht sicher, warum Sie einen Benutzer "täuschen" möchten, indem Sie ein a Tag wie ein input aussehen, aber ich werde Ihrer Argumentation vertrauen ist ehrenhaft. Herr Lister hatte einen guten Kommentar, dass verschiedene Browser input anders darstellen. Deshalb denke ich, dass deine beste Wette, etwas zu bekommen, das ziemlich gut über den Browser funktioniert, ist something like this (the first in the example is a link, the second a real input to compare).

Ich habe das nur in FF getestet. Ich setze die Opazität des Textes in der a durch die rgba, um es zu verbergen, aber behalten Sie es für Suchmaschinenzwecke (so haben Sie nicht einfach ein leeres a Umbau so weit wie die Search Engines betroffen sind). Bei der Verwendung eines "echten" input, um das Aussehen zu erreichen, fügt es nicht-semantisches HTML hinzu, aber es ermöglicht ein besseres Cross-Browser-Rendering der 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; 
}