css的输入框

CSS对表单中的输入框的样式有着很好的支持。我们可以使用CSS来美化输入框的外观，使其更符合我们网站的整体风格。

input[type="text"], input[type="password"], textarea {
  
  padding: 10px;
  
  border: 2px solid #ddd;
  
  border-radius: 5px;
  
  font-size: 16px;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
  
  outline: none;
  
  border-color: #007bff;
  
  box-shadow: 0 0 5px 1px #007bff;
}
 

在上面的代码中，我们使用了伪类选择器:focus，它是当输入框被选中时应用的样式。在这个例子中，我们将输入框的边框颜色代码变为蓝色，并添加了一个小的阴影效果。这个样式可以让用户更清晰地知道他们的输入框是处于哪个状态。

我们还使用了border-radius属性，这可以使输入框具有圆角效果。这通常更符合整体的网站风格，因为它可以使输入框看起来更加友好和现代化。

最后，我们使用了padding属性来增加输入框的内边距。这样做可以使输入框看起来更加整洁，同时给用户提供更多的空间来输入他们的文本。

总之，使用CSS可以让我们很容易地美化表单中的输入框。通过使用简单的属性和选择器，我们可以为这些元素添加一些现代化和友好的外观，使整个网站看起来更加专业和吸引人。