如何使用 CSS 在 Google Chrome 中创建无边框文本框？

【问题标题】：How can I create a borderless textbox in Google Chrome using CSS?如何使用 CSS 在 Google Chrome 中创建无边框文本框？
【发布时间】：2011-03-19 03:16:56
【问题描述】：

如何创建无边框 HTML 文本框以在 Google Chrome 浏览器中工作？如果可能的话，我更愿意在 CSS 中执行此操作。

【问题讨论】：

标签： html css google-chrome

【解决方案1】：

CSS 3 在这里可能会有所帮助：

input[type=text],
input[type=text]:hover,
input[type=text]:focus,
input[type=text]:active
{
    border: 0;
    outline: none;
    outline-offset: 0;
}

【讨论】：

【解决方案2】：

您可以使用以下方法将边框和焦点轮廓移出文本框。

input[type=text], textarea {
  border: 0;
}

input[type=text]:focus, textarea:focus {
  outline: none;
}

【讨论】：

@Kriem：将input[type=text] 替换为textarea。

【解决方案3】：

在css中，写

input, textarea, input:focus, textarea:focus {
     background:transparent;
     border:0;
}

确保焦点上没有边框很重要

【讨论】：

【解决方案4】：

文本区域？喜欢：

HTML：<textarea></textarea>

CSS：textarea { border: none 0; }

【讨论】：

@Andrew: 'borderless' != 'outline-less'，呵呵。
这个问题专门针对 Chrome。我很清楚这个人已经尝试过border: 0 并试图摆脱焦点轮廓。