Как изменить размер или изменить кнопки в html, используя атрибуты contenteditable?

Question

У меня есть кнопка, которую я должен изменить, это цвет, размер и имя.

Я использую атрибут <button contenteditable="true">.

В приведенном ниже примере я могу редактировать содержание текста, который является название кнопки, но я не могу изменить его стиль,

<button contenteditable="true">This is editable</button> 

есть ли способ, что я могу изменить его стиль, а ??

DEMO

Answer 1

Вы не меняет стили элемента только с помощью contenteditable. contenteditable используется для изменения/редактирования только текста.

Answer 2

Да, вы можете добавить стиль к кнопке. Ниже приведен фрагмент.

button { 
    background-color:#112717; 
    -moz-border-radius:8px; 
    -webkit-border-radius:8px; 
    border-radius:8px; 
    border:2px solid #18ab29; 
    color:#ffffff; 
    font-family:Arial; 
    font-size:14px; 
    padding:12px 33px; 
    text-decoration:none; 
    text-shadow:0px 1px 0px #2f6627; 
} 
button:hover { 
    background-color:#23bf2a; 
} 
button:active { 
    position:relative; 
    top:1px; 
} 

<button contenteditable="true" class="myButton">This is an editable</button> 

Или вы можете использовать отдельный класс css для стилизации.

Answer 3

Использование css сделает ваш стиль намного проще, но вот простой способ просто изменить цвет кнопки.

<button type="button" style= background-color:red >Press Me</button>