如何美化php的单选按钮

   2024-09-30 7610
核心提示:要美化 PHP 单选按钮,您可以使用 CSS 和 HTML首先,在 HTML 文件中创建一个表单,包含一些单选按钮:!DOCTYPE htmlhtml lang=en

要美化 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 文件,用于处理表单数据:
<?phpif ($_SERVER["REQUEST_METHOD"] == "POST") {    $gender = $_POST["gender"];    echo "您选择了:$gender";}?>

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

 
举报打赏
 
更多>同类物流大全
推荐图文
推荐物流大全
点击排行

网站首页  |  关于我们  |  联系方式网站留言    |  赣ICP备2021007278号