Css button in textarea

Css button in textarea

Let’s start back in our form.css . We have the form input, and so what I want to do next is I just want to grab that textarea.

You may notice that here we did not select the textarea like have normally gone through this, and that’s because we don’t want just the initial child elements since we’d have to say .form > .form-group > textarea .

But here in this situation we just want to have all of the text area tags inside any form.

.form textarea < margin-top: 20px; width: 100%; height: 250px; border-radius: 3px; border: 3px solid #11122b; font-size: 1.5rem; font-family: inherit; color: inherit; padding: 1.5rem 2rem; transition: all 0.3s; >

Hit save. Come back. And if we hit refresh you can see we have a much better-looking textarea.

I think this looks a million times better than the default one. So that is coming along quite nicely. So I think the next area that makes sense to work on is going to be the button.

And now we could put the button here in the form.css , but my personal preference whenever working with buttons, just based on my experience, is many times buttons are going to be used throughout an entire site. So I think they are worthy of their own dedicated style page.

So I’m going to say buttons.css , because usually, you’re going to have multiple buttons. We’re only going to have one. Then let’s go to contact.html and let’s just make sure that we have imported this.

There we go. So here we have a button of type submit. Let’s add a class to this. Now if we go into buttons, I can add a dedicated button class.

.btn < background-color: #cea135; color: #11122b; font-size: 1.25em; padding: 10px 25px; border: 1px solid #cea135; border-radius: 2px; outline: none; transition: all 0.3s; >

Now we added a border but you won’t actually see the border visually because we’re going to use the same exact gold color.

The reason why I’m doing this is that in certain browsers if you do not put a border around the button, certain browsers will automatically do that actually, and it makes the button kind of look ugly.

So the best practice is to either put a different colored border or to simply put a one-pixel border with the same color that you’re wanting.

Later on we’re going to add a very cool little animation where we add in a fade in and out with a box shadow whenever we click on the button, which is something that will work really well on mobile and on web, and it’s something that’s pretty popular right now from a design perspective.

Hit save now and let’s make sure that worked.

There we go. Now we have a much better-looking button. We’ve built out the styles for our textarea message, and then for our button. In the next guide, we are going to go back up and we’re going to start adding styles for our labels.

Источник

CSS Button inside TextArea in HTML

The following tutorial shows you how to use CSS to do «CSS Button inside TextArea in HTML».

CSS Style

The CSS style to do «CSS Button inside TextArea in HTML» is

p < position:relative; > button < position:relative; float:right; margin:0 0 2% 0; >

HTML Body

body> p contenteditable="true"> button onclick="console.log($(this).parent().find('span').text());">hello span> This is a paragraph. It is editable. Try to change this text. This is a paragraph. It is editable. Try to change this text.This is a paragraph. It is editable. Try to change this text.This is a paragraph. It is editable. Try to change this text.   

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js" > style id="compiled-css" type="text/css"> p!-- w w w . d e m o 2 s .c o m --> < position:relative; > button < position:relative; float:right; margin: 0 0 2% 0; >  body> p contenteditable="true"> button onclick="console.log($(this).parent().find('span').text());">hello span> This is a paragraph. It is editable. Try to change this text. This is a paragraph. It is editable. Try to change this text.This is a paragraph. It is editable. Try to change this text.This is a paragraph. It is editable. Try to change this text.    

Related

• CSS Button inside section element is rendered much larger
• CSS Button inside section element is rendered much larger (Demo 2)
• CSS Button inside section element is rendered much larger (Demo 3)
• CSS Button inside TextArea in HTML
• CSS button is causing input fields to move up on hover (on chrome)
• CSS button is not disabling in internet explorer 10
• CSS button is not working when pseudo element used for parent div

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

Как добавить кнопку в textarea

У меня есть простая формочка для ввода текста.Хочу добавить кнопку для удаления текста в правом углу формы, что-то наподобии этого

Пока получилось только так

.btn-default < background: #DC50FF; color: #ffffff; >.form-control < width: 30%; >.clear

 Browse 
 
Description of presentation :
  
× 
 Upload 

Ответы (6 шт):

Оберните пару дивом, спозиционируйте кнопку абсолютно:

Если позволяют соседние элементы справа от textarea, то без создания дополнительных обёрток и с минимумом кода:

Измените размер. Нажмите кнопку. ×

UPD

При position: relative , отступ неизбежен. Но, метода проще, чем ограничить изменение размера, я не вижу:

.btn-default < background: #DC50FF; color: #ffffff; >.form-control < min-height: 2em; width: 30%; min-width: 18px; max-width: calc(100% - 35px); >.clear

 Browse 
 
Description of presentation :
  
× 
 Upload 

Эксперименты с position: absolute (из прочих ответов) показали, что без дополнительной разметки, кнопка также скачет, при появлении полосы прокрутки у body .

Вот нашел приближенное,к тому что хотел получить.

Для того что бы ваша разметка поддавалась редактированию нужно придерживаться некоторых правил.

Во первых, Вы не корректно используете тег
. Ознакомьтесь с описанием тут и посмотрите правильное и неправильно использование тут

Во вторых, Вы используете атрибут rows=»2″ для задания высоты textarea, но его ширину устанавливаете в CSS при помощи:

Выберете один стиль оформления для тестового поля что бы не путаться и Ваш код оставался поддерживаемым.

В третьих, Вы не корректно используете свойство position . В этом примере хорошо описана разница между relative и absolute.

В четвёртых, ознакомьтесь с свойством box-sizing , оно поможет исправить ситуацию с тем что у кнопки будет отступ от края тестового поля.

Рабочий пример с учётом рекомендаций:

.btn-default < background: #DC50FF; color: #ffffff; >.textarea-wrapper < position: relative; width: 30%; >.textarea-wrapper textarea.form-control < display: block; width: 100%; box-sizing: border-box; >.textarea-wrapper .textarea-clear

 Browse 
Description of presentation :
 
 
× 
 
 Upload

Источник

CSS Button inside TextArea in HTML (Demo 2)

The following tutorial shows you how to use CSS to do «CSS Button inside TextArea in HTML (Demo 2)».

CSS Style

The CSS style to do «CSS Button inside TextArea in HTML (Demo 2)» is

.container !-- w ww . de m o 2 s . c o m--> position:relative; width:300px; height:100px; border:1px solid #ddd; > button < position:absolute; top:3px; right:3px; width:60px; > textarea < position:relative; border:none; width:232px; height:95px; resize:none >

HTML Body

body> div >"container"> button>Button  textarea>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.   

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> .container !-- w w w . d e m o 2 s . c o m--> position:relative; width: 300px; height: 100px; border: 1px solid #ddd; > button < position:absolute; top: 3px; right:3px; width: 60px; > textarea < position:relative; border:none; width:232px; height: 95px; resize: none >  body> div >"container"> button>Button  textarea>Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.    

Related

• CSS Behavior of wrapping text inside Firefox’s textareas
• CSS Body stuck to the bottom so can’t enlarge textarea
• CSS Button inside TextArea in HTML
• CSS Button inside TextArea in HTML (Demo 2)
• CSS Button sticking to form when below textarea
• CSS Button won’t fit in to space left by two text area elements
• CSS Button won’t fit in to space left by two text area elements (Demo 2)

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

CSS Button inside TextArea in HTML

The following tutorial shows you how to use CSS to do «CSS Button inside TextArea in HTML».

CSS Style

The CSS style to do «CSS Button inside TextArea in HTML» is

div < border:1px solid gray; width:15em; height:5em; overflow-y:scroll; > button < float:right; >

HTML Body

body> div> button>press me span contenteditable="true">editable   

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> div border: 1px solid gray; width: 15em; height: 5em; overflow-y: scroll;> button float: right;>  body> div> button>press me span contenteditable="true">editable    

Related

• CSS Automatic adjustment of form width with textarea with in HTML (Demo 2)
• CSS Behavior of wrapping text inside Firefox’s textareas
• CSS Body stuck to the bottom so can’t enlarge textarea
• CSS Button inside TextArea in HTML
• CSS Button inside TextArea in HTML (Demo 2)
• CSS Button sticking to form when below textarea
• CSS Button won’t fit in to space left by two text area elements

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник