Я очень новичок в кодировании в html. Я пытаюсь понять, почему это не будет работать на моем сайте. Я нажал эту кнопку, чтобы скопировать текст, но я хочу, чтобы кнопка выглядела как текст. Я нашел атрибуты, которые нужно изменить, но я не уверен, как их применять. Мой текущий код:
<button id="clip_copy" data-clipboard-text="copied text, yay">Copy Clipboard</button>
<style>
.clip_copy
{
background:none;
border:none;
margin:0;
padding:0;
}
</style>
<script src="zeroclipboard/ZeroClipboard.js"></script>
<script>
var clip = new ZeroClipboard(
document.getElementById('clip_copy'), {
moviePath: "zeroclipboard/ZeroClipboard.swf"
});
</script>
В своем css измените .clip_copy
на #clip_copy
. Синтаксис, который вы используете, предназначен для классов.
class=btn
и использование селектора классов .btn
, поскольку это более гибко: вы можете использовать одно и то же правило CSS для разных элементов на странице. Правило не делает содержимое похожим на обычный шрифт: обычно оно имеет специальный шрифт и уменьшенный размер шрифта (в соответствии с настройками браузера по умолчанию), поэтому для того, чтобы оно действительно выглядело как текст для копирования, вам необходимо установить одинаковое font-family
как текст для копирования и font-size: 100%
. Различия могут сохраняться, поэтому вы также можете установить цвет фона и содержимого.
span
. Есть несколько способов, которыми элементыbutton
отличаются от текста, частично в зависимости от браузера. (Не то, чтобы я рекомендовал сделать что-то похожим на текст, когда это функционально кнопка.)