bootstrap input-group addon styling

Question

Sto usando il bootstrap input-group su una textarea, quello che voglio è avere l'etichetta, o input-group-addon sopra lo textarea, ma a causa dello stile dell'elemento 'addon' non sembra molto buono (specialmente sul lato destro).

Come è possibile rendere decente l'textarea utilizzando input-group?

Example per vedere differenza sul <input> e <textarea>

Credo che quello che vorrei è leggermente i bordi arrotondati sul lato destro, come quella a sinistra, sull'ingresso textarea, l'ingresso normale va bene.

Answer 1

È possibile ignorare il normale add-on con l'aggiunta di una nuova classe al textarea e applicare alcune css modifiche su di esso:

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

e per il 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; 
} 

Se il' Usando meno o la bussola, userei le variabili invece dei numeri semplici. Inoltre, si dovrebbe aggiungere alcune proprietà di compatibilità del browser (come -webkit e prefissi -moz)

vivo esempio: http://plnkr.co/edit/dMa4UPLMqOXdVITzFKNr?p=preview

Answer 2

lo stile predefinito per questo elemento non dovrebbe avere il diritto angoli non arrotondati quando posizionata prima del campo di immissione e ha gli angoli arrotondati a sinistra quando è posizionata dopo il campo a sinistra .. è possibile aggiungerli in questo modo o creare una classe con queste caratteristiche Incluso e aggiungere l'elemento

Il gruppo di input-addon stile predefinito don

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

arco uso e non div per addon

Answer 3

Che ne dite di questo: -

.row .form-group .input-group-addon { 
 
    background-color: #eee; 
 
    border-right: 1px solid #ccc; 
 
    border-top-right-radius: 4px; 
 
    border-bottom-left-radius: 0; 
 
    border-bottom: 0; 
 
} 
 

 
.row .form-group textarea.form-control { 
 
    border-top-right-radius: 0px; 
 
    border-top-left-radius: 0px; 
 
    margin-top: 0px; 
 
    margin-bottom: 0px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" /> 
 

 
<div class="row" style="padding:30px 100px;"> 
 
    <div class="col-md-6"> 
 
     <div class="form-group"> 
 
     <div class="input-group-addon">Description</div> 
 
     <textarea class="form-control" rows="5"></textarea> 
 
     </div> 
 
    </div> 
 
</div>