阅读量:0
要美化 PHP 单选按钮，您可以使用 CSS 和 HTML
- 首先，在 HTML 文件中创建一个表单，包含一些单选按钮：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>美化单选按钮</title> <link rel="stylesheet" href="styles.css"> </head> <body> <form action="process_form.php" method="post"> <label class="custom-radio"> <input type="radio" name="gender" value="male"> <span class="radio-btn"></span> 男性 </label> <label class="custom-radio"> <input type="radio" name="gender" value="female"> <span class="radio-btn"></span> 女性 </label> <button type="submit">提交</button> </form> </body> </html> - 接下来，在名为
styles.css的同一目录中创建一个新的 CSS 文件，并添加以下样式：
/* 隐藏默认的单选按钮 */ input[type="radio"] { display: none; } /* 自定义单选按钮样式 */ .custom-radio { position: relative; padding-left: 35px; cursor: pointer; font-size: 22px; user-select: none; } .radio-btn { position: absolute; top: 0; left: 0; height: 24px; width: 24px; background-color: #eee; border-radius: 50%; transition: background-color 0.2s; } /* 当鼠标悬停在单选按钮上时改变背景色 */ .custom-radio:hover .radio-btn { background-color: #ccc; } /* 当单选按钮被选中时显示蓝色边框和蓝色圆点 */ input[type="radio"]:checked ~ .radio-btn { background-color: #2196F3; } input[type="radio"]:checked ~ .radio-btn::after { content: ""; position: absolute; top: 7px; left: 7px; width: 10px; height: 10px; border-radius: 50%; background-color: white; } - 最后，在名为
process_form.php的同一目录中创建一个 PHP 文件，用于处理表单数据：
<?php if ($_SERVER["REQUEST_METHOD"] == "POST") { $gender = $_POST["gender"]; echo "您选择了：$gender"; } ?> 现在，当您运行此代码时，单选按钮将具有美化的外观。请注意，这只是一个简单的示例，您可以根据需要进一步自定义样式。
