CSS Chrome/Safari：只有在指定边框时，box-shadow才会显示在文本输入框上

在本文中，我们将介绍CSS中的一个问题：在Chrome和Safari浏览器中，只有在指定边框时，box-shadow才会出现在文本输入框上的情况。

阅读更多：https://sotoolbox.com/tag/css target="_blank" rel="nofollow">CSS 教程

问题描述

在Web开发中，我们经常使用box-shadow属性添加阴影效果来美化元素。然而，在Chrome和Safari浏览器中，当我们尝试向文本输入框添加box-shadow时，只有在同时指定边框时阴影效果才会显示。如果没有指定边框，box-shadow将不会出现在文本输入框上。

这个问题可能会导致设计上的困惑和限制，以及对Web开发者的不便。在某些情况下，我们可能希望为文本输入框添加阴影效果，而不希望显示边框。

原因分析

这个问题的原因是因为Chrome和Safari浏览器将box-shadow属性应用于边框框而不是文本输入元素本身。如果没有指定边框，box-shadow就无法正确显示。

解决方案

要解决这个问题，我们可以采用以下两种方法之一：

方法一：使用伪元素

我们可以使用CSS伪元素来模拟文本输入框，并为其添加box-shadow效果。通过这种方法，我们可以完全控制阴影效果，而无需指定边框。下面是一个示例代码：

.input-wrapper {
  position: relative;
  display: inline-block;
}

.input-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.input-wrapper input {
  border: none;
  padding: 5px;
  border-radius: 5px;
}

在上面的代码中，我们首先创建一个具有边框和box-shadow的伪元素.input-wrapper::before，然后将文本输入框置于其中。通过这种方式，我们可以应用box-shadow效果并同时控制文本输入框的样式。

方法二：使用背景渐变

另一种解决方法是使用CSS背景渐变来模拟box-shadow效果。通过将渐变代码应用于文本输入框的背景，我们可以创建类似于box-shadow的效果。下面是一个示例代码：

.text-input {
  background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)) no-repeat;
  background-position: bottom;
  background-size: 100% 3px;
}

在上面的代码中，我们使用线性渐变创建了一个半透明的背景并将其应用于文本输入框。通过调整渐变的起始和结束颜色以及背景的位置和大小，我们可以模拟出类似于box-shadow的效果。

示例说明

为了更好地理解这个问题和解决方案，让我们看以下示例：

<!DOCTYPE https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<https://sotoolbox.com/tag/css target="_blank" rel="nofollow">html>
<head>
  <style>
    .input-wrapper {
      position: relative;
      display: inline-block;
    }

    .input-wrapper::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    }

    .input-wrapper input {
      border: none;
      padding: 5px;
      border-radius: 5px;
    }
  </style>
</head>
<body>
  <div class="input-wrapper">
    <input type="text" placeholder="Method 1: Using pseudo element">
  </div>

  <br>

  <input type="text" class="text-input" placeholder="Method 2: Using background gradient">
</body>
</html>

通过上面的示例代码，我们可以看到两种解决方法的效果。在第一个文本输入框中，我们使用了伪元素来模拟box-shadow效果。而在第二个文本输入框中，我们使用了背景渐变来实现类似的效果。