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

Question

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

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

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

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

Могу ли я изменить его стиль?

DEMO

Answer 1

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

Answer 2

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

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

Answer 3

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

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 для стилизации.