Quello che sto cercando di fare è aggiungere un pulsante in basso a destra di una textarea, come questo:Aggiunta pulsante per textarea
Tuttavia, non ho idea di come avrei fatto questo. Per favore aiuto!
Quello che sto cercando di fare è aggiungere un pulsante in basso a destra di una textarea, come questo:Aggiunta pulsante per textarea
Tuttavia, non ho idea di come avrei fatto questo. Per favore aiuto!
Effettuate la seguente
<div id='container' style='width:600px; border:1px solid black;'>
<textarea style='border-style:none none dashed none; border-color:black; width:100%; display:block;box-sizing:border-box;border-width:1px; margin-bottom:1px;'></textarea>
<div style='width:100%; box-sizing:border-box; height:35px;padding:5px;'>
<button style='float:right'>Lama mama
</button>
</div>
</div>
anche here.
È possibile utilizzare css per posizionare il pulsante in modo assoluto.
Ecco una demo: http://jsfiddle.net/GwheP/
div{
display:inline-block;
position:relative;
}
button{
position:absolute;
bottom:10px;
right:10px;
}
textarea{
display:block;
}
<div>
<textarea name="" id="txt" cols="20" rows="5"></textarea>
<button>Submit</button>
</div>
Perché il div ha bisogno di un blocco in linea? – Edward
@Edward il display div di default è 'block' che forza l'elemento a occupare tutta la larghezza disponibile. [Ciò farebbe sì che il pulsante sia sulla destra della pagina.] (Http://jsfiddle.net/mirohristov/GwheP/305/) 'display: inline-block' occupa solo la larghezza di cui ha bisogno - avvolge l'oggetto. Puoi usare solo 'display: inline' ma' inline-block' aggiunge nuove righe prima e dopo l'elemento. – Miro
HTML
<div class="wrapper">
<textarea name="somename" id="" cols="20" rows="10"></textarea>
<div class="controls">
<button>Post as Anonymous</button>
</div>
</div>
CSS
*{
padding: 0;
margin:0;
}
.wrapper{
background: #eee;
border: 1px solid #999;
width: 600px;
}
.wrapper textarea{
background: linear-gradient(to bottom, #e5e5e5 0%,#f2f2f2 100%);
border:none;
width:100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px dotted #999;
resize: none;
}
.wrapper textarea:focus{
outline: none;
}
.controls{
text-align: right;
margin-top: -6px;
}
button{
background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
border: 1px solid #999;
padding: 10px 25px;
font-weight: bold;
color: rgb(77,77,77);
border-width: 1px 0 0 1px;
}
Spero che questo css aiuto per il tasto per adattarsi in textarea sulla destra ... a causa di allineare la posizione di fondo .....
textarea {
width: 100px;
height: 50px;
padding-right: 20px;
background-image: url('http://www.isilo.com/support/manual/iSiloIP/img/gearIcon.gif');
background-position: top right;
background-repeat: no-repeat;}
generalmente è utile spiegare, le sole risposte al codice sono disapprovate. – Hughzi
È il mio primo post in overflow dello stack ... di seguito correggerò che ... –
Benvenuto nello stack overflow, puoi modificare il tuo post per spiegare perché hai fornito questo snippet come risposta e cosa aggiunge alle risposte esistenti. Grazie e di nuovo benvenuto :) – Hughzi
dat stile in linea! – Miro
Puoi cambiarlo in css, ma in realtà non è importante per l'esempio. :) – WhyMe