86

所以我有一个文本输入，我在 chrome 上使用 html5，我想更改文本输入的外观，我已经删除了焦点上的轮廓（chrome 上的橙色），我将背景设置为浅色#f1f1f1但现在在顶部和左侧有一个更厚的边框，就像它看起来像是被推入的，当背景颜色没有变化时，这不会发生。如何删除它？抱歉，我无法在移动设备上提供图片。

它发生在chrome，ie和Firefox上，无法测试任何其他人。

4

9 回答 9

147

border-style:solid;将覆盖inset样式。这是你问的。

border:none将一起删除边框。

border-width:1px将其设置为类似于背景更改之前的样子。

border:1px solid #cccccc更具体，并应用所有三个，宽度，样式和颜色。

示例：https ://jsbin.com/quleh/2/edit?html,output

于 2012-10-09T01:28:50.123 回答
52

这是移动 safari 的解决方案：

  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;

根据https://developer.mozilla.org/en-US/docs/Web/CSS/appearance

并按照此处的建议：删除 Mobile Safari (iPhone) 上的 textarea 内阴影

于 2014-09-10T16:55:13.393 回答
29

目前没有任何解决方案有效。这是我的解决方案。您可以添加前缀。

box-shadow: inset 0px 0px 0px 0px red;
于 2015-11-22T01:43:08.707 回答
19

添加border: none或border: 0完全删除边框，或border: 1px solid #ccc使边框变薄而平坦。

要删除 Firefox 中的幽灵填充，您可以使用::-moz-focus-inner：

::-moz-focus-inner {
    border: 0;
    padding: 0;
}

见现场演示。

于 2012-10-09T01:24:28.483 回答
12

设置border: 1px solid black为使所有边相等并删除任何类型的自定义边框（实心除外）。此外，设置box-shadow: none为删除应用到它的任何嵌入阴影。

于 2012-10-09T01:27:11.253 回答
9

试试这个
outline: none;

现场演示https://codepen.io/wenpingguo/pen/KQgbXq

于 2018-02-07T05:06:26.573 回答
3

所有浏览器，包括 Safari（+ 移动）：

input[type=text] {   
    /* Remove */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Optional */
    border: solid;
    box-shadow: none;
    /*etc.*/
}
于 2021-01-12T02:34:50.450 回答
0

我正在研究火狐。我遇到了同样的问题，输入类型的文本是自动定义的，看起来像 boxshadow 插图，但事实并非如此。您要更改的是边框...只需设置即可border:0;。

于 2016-10-15T22:12:33.327 回答
0

这是一个小片段，尝试一下可能很酷：

input {
border-radius: 10px;
border-color: violet;
border-style: solid;
}

请注意：border-style删除内部阴影。

input {
    border-radius: 10px;
    border-color: violet;
    border-style: solid;
  }
<input type="text"/>

于 2020-02-15T22:01:39.597 回答