bootstrap-input-group-addon styling

Ich bin mit bootstrap ist input-group auf eine textarea, was ich will, ist auf das label haben, oder input-group-addon über die textarea, aber durch das styling der 'addon' element es sieht nicht sehr gut (vor allem auf der rechten Seite).

Wie kann ich machen das textarea anständig Aussehen, mit input-group?

Beispiel , um zu sehen Unterschied auf <input> und <textarea>

Ich denke, was ich möchte ist leicht abgerundete Kanten auf der rechten Seite, wie auf der linken Seite, auf der textarea Eingang, der normale Eingang ist in Ordnung.

mehr klar sein . was Sie erwarten ?

InformationsquelleAutor klskl | 2015-12-18

  1. 5

    Können Sie überschreiben den regulären add-on, indem Sie eine neue Klasse, die textarea und gelten einige css änderungen auf:

    <div class="input-group-addon textarea-addon"> Description </div>
<textarea class="form-control" rows="5"></textarea>

    und für die css:

    .textarea-addon{
  border-bottom-left-radius: 0px !important;
  border-top-right-radius: 4px !important;
  border:1px solid #ccc !important;
  border-bottom: none !important;
}
textarea{
  border-top-left-radius:0px !important;
  border-top-right-radius:0px !important;
}

    Wenn your ' E mit weniger oder Kompass würde ich die Verwendung von Variablen anstelle von einfachen zahlen.
    Zusätzlich, sollten Sie einige browser-Kompatibilität Eigenschaften (wie die -webkit-und -moz-Präfixe)

    Live-Beispiel: http://plnkr.co/edit/dMa4UPLMqOXdVITzFKNr?p=preview

    InformationsquelleAutor MorKadosh

  2. 1

    Standard-style für dieses element ist nicht zu erwarten, dass das Recht, nicht abgerundeten Ecken, wenn Sie vor dem Eingabefeld und hat abgerundete Ecken nach Links, wenn er nach dem linken Feld .. Sie können Sie so oder so eine Klasse erstellen mit diesen Funktionen und fügen Sie das Element

    Den input-group - addon default-Stil don

    <span class="input-group-addon" 
    style=" border-top-right-radius: 6px;   
            border-bottom-right-radius: 6px; border-right: solid 1px #ccc;">
  Description</span>

    benutzen, umfassen und nicht für div addon

    InformationsquelleAutor scaisEdge

Schreibe einen Kommentar