如何使用 contenteditable 属性调整或编辑 html 中的按钮?
How to resize or edit the buttons in html, using contenteditable attributes?
我有一个按钮,我必须更改它的颜色、大小和名称。
我正在使用 <button contenteditable="true">
属性。
在下面的示例中,我可以编辑作为按钮名称的文本内容,但我无法更改它的样式,
<button contenteditable="true">This is editable</button>
有什么方法可以改变它的样式吗??
您不能仅通过使用 contenteditable 来更改元素的样式。 contenteditable 仅用于 modify/edit 文本。
是的,您可以为按钮添加样式。请在下面的代码段中找到。
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 class 来设置样式。
使用 css 可以让您的造型更容易,但这里有一个简单的方法来改变按钮颜色。
<button type="button" style= background-color:red >Press Me</button>
我有一个按钮,我必须更改它的颜色、大小和名称。
我正在使用 <button contenteditable="true">
属性。
在下面的示例中,我可以编辑作为按钮名称的文本内容,但我无法更改它的样式,
<button contenteditable="true">This is editable</button>
有什么方法可以改变它的样式吗??
您不能仅通过使用 contenteditable 来更改元素的样式。 contenteditable 仅用于 modify/edit 文本。
是的,您可以为按钮添加样式。请在下面的代码段中找到。
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 class 来设置样式。
使用 css 可以让您的造型更容易,但这里有一个简单的方法来改变按钮颜色。
<button type="button" style= background-color:red >Press Me</button>