Erstellen Sie ein readonly-Textfeld aber ohne ein textfield-Objekt-Grenze

Im Versuch, erstellen Sie ein text-Feld ist readonly, aber es sollte nicht Aussehen wie ein Textfeld.

Der normal readonly-Textfeld ist

Your name is [ SAM ]

aber ich will es wie

Your name is SAM

Ist, dass es Aussehen sollte wie die Fortsetzung des Satzes und kann immer noch handeln, wie ein text-Feld, auf das wir zeigen können, Wert (hier SAM).
Jede Möglichkeit, das zu tun?

Haben Sie versucht, die CSS?
Sie können es durch css.
oder html5-Inhalt-editierbar html5doctor.com/the-contenteditable-attribute

InformationsquelleAutor Ajeesh | 2013-12-29

  1. 7

    Was Sie suchen, ist dies:

    HTML:

    Your name is <input type="text" value="SAM" readonly="readonly" />

    CSS:

    input {
    border: 0;
}

    Können Sie stellen Sie den input-Feld readonly im HTML, das macht es so können Sie nicht Bearbeiten Sie das Feld. Dann werden Sie wollen, um loszuwerden der Grenze, also es lässt es so Aussehen, dass Ihr neben dem text. Dann passen Sie es wie Sie sehen, passen.

    DEMO

    Update:

    Wenn die Eingabe in einem div/span-Sie können nur die Eingänge in das div/span etwa so:

    HTML:

    <span class="test">Your name is <input type="text" value="SAM" readonly="readonly" /></span>

    CSS:

    .test input {
    border: 0;
}

    DEMO

    Ich will nur, dass der input zu sein, die Grenze weniger,ich habe versucht, eine Klasse und ergänzt diese Eingabe aber seine Standard-design kommt
    Was ist es verpackt? Nehmen Sie einfach die div - Klasse oder-id, und legen Sie Sie vor. Oder für diese Angelegenheit, Sie könnten nur geben Sie dem Eingang eine eigene Klasse und diese verwenden.
    überprüfen Sie die Geige pleas jsfiddle.net/xMG48/4
    wenn ich entfernen Sie die readonly-its mit meinen css-Klasse,aber wenn readonly Hinzugefügt losingits css-Eigenschaft
    In deinem Beispiel haben Sie nicht die Einstellung der Klasse. Klasse .. Sie war nur die Einstellung x. Ändern Sie die CSS .x statt x und wird es beheben. DEMO HIER

    InformationsquelleAutor Ruddy

  2. 4

    Stil alle readonly Textfelder gelten folgende CSS-Regel

    input[readonly="readonly"] {
      border:0px;
}
    Dies ist die beste Antwort als nur "readonly" - Eingänge sind betroffen.

    InformationsquelleAutor semirturgay

  3. 2

    Kann es durch css. LIVE-DEMO

    <style>
*
{
    font-family: Tahoma;
    font-size: 13px;
}
input
{
    background-color:transparent;
    border:0px;
    padding:0px;
}
</style>
this is the <input type='text' value='textbox' readonly >

    InformationsquelleAutor Siamak A.Motlagh

  4. 2

    Legen Sie die Grenze, Umriss und hintergrund zu none an, und Sie erhalten die gewünschte Wirkung.

    input[disabled] {
    background:none;            
    border:none;
    outline:none;
}

    Wäre es immer noch nehmen Sie die default-min-width, obwohl, so müssen Sie möglicherweise stellen Sie die Breite auf einen kleineren Wert.

    DEMO

    InformationsquelleAutor tewathia

  5. 1

    Fügen Sie diese zu Ihrem CSS:

    input[type="text"], input[type="text"]:focus { border: none; outline: 0; }

    InformationsquelleAutor Sai Kiran Sripada

  6. 0

    Ja, warum nutzen Sie nicht CSS?

    Hinzufügen:

    input[type="text"] { border: none; }

    Auch eine option: hinzufügen von hintergrund-Folie wie oben erwähnt.

    InformationsquelleAutor user1627363

  7. 0
    <input type="text" value = "Your Name is SAM" readonly= "true" style ="border: none" name="name"/>

    InformationsquelleAutor Saad Bhutto

  8. 0

    Set der Grenze zu 0px und der hintergrund transparent ist, sollte Dies funktionieren.

    In der CSS-Datei:

    *
{
    font-size: 14px;
    font-family: Arial;
}
input[type="text"]
{
    border:0px solid red;
    background: none;
}

    In der HTML-Datei:

    Hello <input type="text" value="John">

    InformationsquelleAutor schnawel007

Schreibe einen Kommentar