如何美化php的单选按钮

PHP

小樊

2024-09-06 01:20:29

栏目: 编程语言

要美化 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";
}
?>

现在，当您运行此代码时，单选按钮将具有美化的外观。请注意，这只是一个简单的示例，您可以根据需要进一步自定义样式。

如何美化php的单选按钮

最新问答

相关标签