Shopify站点用W3Schools复制代码出现异常边框与高亮求助

问题原因 #

你遇到的是浏览器默认表单元素:focus状态样式，以及Shopify主题自带的全局样式覆盖了输入框的选中高亮效果，导致点击复制后出现灰色边框、黑色文本+灰色高亮的默认样式。

解决方案 #

通过添加针对性的CSS规则，覆盖默认和主题样式，自定义输入框的focus状态和文本选中样式：

修改后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* 自定义输入框focus状态样式 - 加粗边框 */
#myInput:focus {
  outline: 2px solid #007bff; /* 蓝色加粗边框，可替换为你需要的颜色 */
  outline-offset: 0;
  border: none; /* 去掉默认边框，避免样式叠加 */
}

/* 自定义文本选中样式 - 蓝色背景白色文本 */
#myInput::selection {
  background-color: #007bff; /* 蓝色高亮背景 */
  color: #ffffff; /* 白色文本 */
}

/* 兼容Firefox的文本选中样式 */
#myInput::-moz-selection {
  background-color: #007bff;
  color: #ffffff;
}
</style>
</head>
<body>

<p>Click on the button to copy the text from the text field. Try to paste the text (e.g. ctrl+v) afterwards in a different window, to see the effect.</p>

<input type="text" value="Hello World" id="myInput">

<div class="tooltip">
<button onclick="myFunction()" onmouseout="outFunc()">
  <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
  Copy text
  </button>
</div>

<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copied: " + copyText.value;
}

function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copy to clipboard";
}
</script>
</body>
</html>

关键样式说明 #

• #myInput:focus：专门针对输入框获得焦点（点击复制后触发）的状态，设置加粗的蓝色外边框，同时去掉默认边框避免样式叠加，颜色可根据需求替换。
• #myInput::selection和#myInput::-moz-selection：分别适配标准浏览器和Firefox，设置文本选中时的蓝色背景与白色文本，完全覆盖默认的灰色高亮样式。

适配Shopify主题的注意事项 #

如果在Shopify主题中样式仍不生效，说明主题CSS优先级更高，可以给选择器提升优先级，比如：

.shopify-section #myInput:focus {
  outline: 2px solid #007bff !important;
  border: none !important;
}

（注：shopify-section是Shopify主题常见的容器类名，可根据实际页面结构替换为输入框所在的父容器类名）

内容的提问来源于stack exchange，提问作者autotech2