#浏览器中的CSS实现radio样式、input样式，保姆级教程送给你#title# 一直想要掌握原生form的radio单选框和input输入框的hover样式以及聚焦focus的样式吗？往下看！我们会在本文中逐步解析CSS代码，教你如何实现这些样式。 ## 前提准备在我们开始之前，你需要确保你已准备以下条件： * 文本编辑器或代码编辑器（如Visual Studio Code） * 网页浏览器（如Chrome、Firefox或Safari） * 少许耐心和学习的决心 ## HTML代码在开始使用CSS样式之前，我们需要一个HTML文件作为承载体。创建一个新的HTML文件，并输入以下代码： ```html <!DOCTYPE html> <html> <head> CSS Form Styles

2023-08-09 08:45:22

CSS实现单选框和输入框样式的进阶指南

掌握原生表单的样式对于创建美观且交互性强的应用程序至关重要。在本教程中，我们将深入探讨如何使用CSS实现单选框和输入框的自定义样式，包括悬停效果和焦点状态。

HTML结构

首先，创建一个基本的HTML表单，包含单选框、输入框和提交按钮：

<form>
  <input type="radio" id="radio-button-1" name="radio-group">
  <label for="radio-button-1">选项 1</label>

  <input type="radio" id="radio-button-2" name="radio-group">
  <label for="radio-button-2">选项 2</label>

  <input type="text" id="input-field" placeholder="输入文字">

  <input type="submit" value="提交">
</form>

CSS样式

单选框

CSS代码：

input[type="radio"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #ccc;
  border-radius: 50%;
}

input[type="radio"]:checked {
  background-color: #4caf50;
  border-color: #4caf50;
}

input[type="radio"]:hover {
  border-color: #888;
}

input[type="radio"]:focus {
  outline: 2px solid #000;
}

说明：

appearance: none; 隐藏了浏览器的默认样式。
设置了自定义的宽、高、边框和圆角样式。
选中时更改背景色和边框色。
悬停和焦点状态下应用不同的边框颜色。

输入框

CSS代码：

input[type="text"] {
  width: 250px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input[type="text"]:hover {
  border-color: #888;
}

input[type="text"]:focus {
  outline: 2px solid #000;
}

说明：

设置了输入框的默认样式，包括宽度、内边距、边框和圆角。
悬停时更改边框颜色。
焦点状态下添加轮廓。

提交按钮

CSS代码：

input[type="submit"] {
  padding: 10px 20px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 5px;
}

input[type="submit"]:hover {
  background-color: #3e8e41;
}

input[type="submit"]:active {
  background-color: #388e3c;
}