去除文本输入的内阴影

Posted 2023-02-22

【中文标题】去除文本输入的内阴影

【英文标题】：remove inner shadow of text input

【发布时间】：2012-09-29 06:55:26

【问题描述】：

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

它发生在 chrome、ie 和 Firefox 上，不能测试任何其他的。

【参考方案1】：

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

border:none 将一起移除边框。

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

border:1px solid #cccccc 更具体，适用于宽度、样式和颜色这三个方面。

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

【讨论】：

第一行border-style: solid是这个问题的最佳答案。

border-style: 没有答案是正在寻找

【参考方案2】：

这是移动 safari 的解决方案：

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

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

并按照此处的建议：Remove textarea inner shadow on Mobile Safari (iPhone)

【讨论】：

用作魅力

【参考方案3】：

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

box-shadow: inset 0px 0px 0px 0px red;

【参考方案4】：

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

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

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

见live demo。

【讨论】：

当我这样做时，它没有边框，是的，但是当我将边框设置为 1px 并将颜色设置为黑色时，只设置了两侧。另一个是白色的。

【参考方案5】：

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

【讨论】：

如果我将边框设置为任何其他颜色，比如说#eee，只有两侧仍在设置

看看我的更新。您可能还需要将边框样式和大小更改为solid 和1px。

谢谢。我的基础是你的，所以是的。

box-shadow 是这个解决方案适合我的原因，没有其他解决方案有这个功能。

【参考方案6】：

试试这个outline: none;

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

【参考方案7】：

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

input[type=text]    
    /* Remove */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    /* Optional */
    border: solid;
    box-shadow: none;
    /*etc.*/

【参考方案8】：

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

【参考方案9】：

这是一个小sn-p，尝试一下可能会很酷：

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"/>