Phụ thêm nút để textarea

Question

Những gì tôi đang cố gắng làm là thêm một nút vào góc dưới bên phải của textarea, như thế này:

Tuy nhiên, tôi không có ý tưởng làm thế nào tôi muốn làm điều này. Hãy giúp tôi!

Answer 1

Hãy thử những điều sau đây,

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

Cũng here.

Answer 2

Bạn có thể sử dụng css để định vị nút ở đó hoàn toàn.

Đây là một bản 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

Tôi hy vọng css này giúp bạn cho nút để phù hợp trong textarea trên góc ... vì sắp xếp vị trí nền .....

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