how to make a button in the textarea tag, like an example, not just a checkbox with a checkmark and I would like the text to be written there not to go under the button. button

    2 answers 2

    If possible, avoid overlapping input fields, especially text areas — you inevitably eat up input space and degrade UX. It is better to have all the control buttons on the side or bottom of the input fields.

    The layout in your situation in general will be as follows:

    <div class="input-group"> <textarea class="input"></textarea> <button class="input-addon">Сохранить</button> </div>

    Position the button absolutely, from the bottom right with a small indentation, and with a fixed height / width.

     .input-group .input-addon { position: absolute; bottom: 10px; right: 10px; height: 30px; width: 50px; }

    And in the text area, specify either the bottom padding or the right one:

     .input-group .input { padding-bottom: 50px; padding-right: 70px; }

    In this case, you will not be able to enter text along the entire right or along the entire bottom edge, and it will not crawl under the button.

       div { display: inline-block; position: relative; } button { position: absolute; bottom: 25px; right: 25px; } #txt { border: 10px solid transparent; -moz-border-image: -moz-linear-gradient(top, #FC913A 0%, #FF4E50 100%); -webkit-border-image: -webkit-linear-gradient(top, #FC913A 0%, #FF4E50 100%); border-image: linear-gradient(to bottom, #FC913A 0%, #FF4E50 100%); border-image-slice: 1; padding: 10px; } ::-webkit-input-placeholder {color:#c0392b;} ::-moz-placeholder {color:#c0392b;}/* Firefox 19+ */ :-moz-placeholder {color:#c0392b;}/* Firefox 18- */ :-ms-input-placeholder {color:#c0392b;} :focus::-webkit-input-placeholder {color: transparent} :focus::-moz-placeholder {color: transparent} :focus:-moz-placeholder {color: transparent} :focus:-ms-input-placeholder {color: transparent} 
       <div> <textarea name="" id="txt" placeholder="&#8250; Message" cols="30" rows="10"></textarea> <button>Сохранить</button> </div>