How to resize or edit the buttons in html, using contenteditable attributes?

Question

I have a Button which I have to change it's color, size and name.

I'm using <button contenteditable="true"> attribute.

In the below example I can edit the text content which is the name of the button but I cannot change it's style,

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

is there any way that i can change it's style as well??

DEMO

Answer 1

You doesn't change styles of an element just by using a contenteditable. contenteditable is used to modify/edit only the text.

Answer 2

Yes you can add style to button. Please find below the snippet.

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>

Or you can use a separate css class for styling.

Answer 3

Using css will make your styling much easier but here is a simple way to just change the button color.

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