Dołączanie przycisk do textarea

Question

Co staram się zrobić, to dołączyć przycisk w prawym dolnym rogu textarea, podobnie jak to:

Jednak nie mam pojęcia, jak bym to zrobić. Proszę pomóż!

Answer 1

spróbuj wykonać następujące czynności,

<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> 

także here.

Answer 2

Możesz użyć css, aby ustawić absolutnie ten przycisk.

Oto 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>

Answer 3

Live Demo

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; 
} 

Answer 4

Mam nadzieję CSS pomóc w przycisk, aby zmieścić się w textarea na rogu ... ze względu na dostosowanie położenia tła .....

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;}