html 选择框边框未正确加载颜色

elcex8rz 于 2023-09-28 发布在其他

关注(0)|答案(3)|浏览(90)

我正在建立一个注册系统。我有3个选择框的一天，一个月和一年的生日。我正在尝试这样做，当你提交的信息，它会检查如果用户选择一个完整的日期，它也检查如果用户是13岁以上。如果他比较年轻，或者他只选择了一天和一个月，而不是一年，那么选择框的边框将变成红色。问题是，当我第一次加载页面时，日期和年份框的边框已经是红色的了。这是密码。怎么了？

<?php
$currentDate = (null);
$date = (null);
$usersday = (null);
$usersyear = (null); 
$usersmonth = (null);
$diff = (null);
$users_age = (null);
if (isset($_POST['submit-button'])) {
    $usersday = (int)$_POST['day']; 
    $usersyear = (int)$_POST['year']; 
    $usersmonth = (int)$_POST['month'];
    $date = new DateTime("$usersyear-$usersmonth-$usersday");
    $today = new DateTime('today');
    $diff = $today->diff($date);
    $users_age = $diff->format('%y');
};
?>
<!DOCTYPE html>
<html>
<head>
<?php
if (($usersday !== null) || ($usersmonth !== null) || ($usersyear !== null) || ($users_age < 
13)) {
        $date = (null);
        echo
        "#month {
        border-color: #ff0000;
        }";
        echo
        "#day {
        border-color: #ff0000;
        }";
        echo
        "#year {
        border-color: #ff0000;
        }";
        echo
        ".birthday-label {
        color: #ff0000;
        }";
    }
    ?>
    </style>
</head>
<body>
<div class="input-group">
            <select id="day" name="day" autocomplete="off" class="select-box">
                <option hidden selected selected value="0" >Day</option>
                <?php
                for ($i = 1; $i <= 31; $i++) {
                echo "<option value=\"$i\">$i</option>";
                }
                ?>
                </select>
                <select id="month" name="month" autocomplete="off" class="select-box">
                <option hidden selected value="0" >Month</option>
                <option id="jan" value="1">Jan</option>
                <option id="feb" value="2">Feb</option>
                <option id="mar" value="3">Mar</option>
                <option id="apr" value="4">Apr</option>
                <option id="may" value="5">May</option>
                <option id="jun" value="6">Jun</option>
                <option id="jul" value="7">Jul</option>
                <option id="aug" value="8">Aug</option>
                <option id="sep" value="9">Sep</option>
                <option id="oct" value="10">Oct</option>
                <option id="nov" value="11">Nov</option>
                <option id="dec" value="12">Dec</option>
            </select>
            <select id="year" name="year" autocomplete="off" class="select-box">
                <option hidden selected value="0" >Year</option>
                <?php
                for ($i = 2023; $i >= 1900; $i--) {
                    echo "<option value=\"$i\">$i</option>";
                }
                ?>
            </select>
        </div>
</body>
</html>

Html

来源：https://stackoverflow.com/questions/77153274/select-box-border-dosent-load-colour-correctly

3条答案

按热度按时间

5kgi1eie1#

这是因为负责设置边框颜色的PHP代码是在页面加载时执行的，并且由于$usersday和$usersyear等变量最初设置为null，因此立即满足设置边框颜色的条件。

赞(0）回复(0）举报 2023-09-28

fxnxkyjh2#

若要解决此问题，您应该仅在提交表单且满足条件时应用红色边框颜色。您可以通过将设置边框颜色的CSS代码移动到检查表单提交的条件块中来实现这一点。下面是代码的更新版本：

<!DOCTYPE html>
<html>
<head>
<style>
<?php
$currentDate = null;
$date = null;
$usersday = null;
$usersyear = null; 
$usersmonth = null;
$diff = null;
$users_age = null;

if (isset($_POST['submit-button'])) {
$usersday = (int)$_POST['day']; 
$usersyear = (int)$_POST['year']; 
$usersmonth = (int)$_POST['month'];
$date = new DateTime("$usersyear-$usersmonth-$usersday");
$today = new DateTime('today');
$diff = $today->diff($date);
$users_age = $diff->format('%y');

if ($usersday !== null || $usersmonth !== null || $usersyear !== null || 
    $users_age < 13) {
        echo "
        #month, #day, #year {
            border-color: #ff0000;
        }
        .birthday-label {
            color: #ff0000;
        }";
    }
}
?>
</style>
</head>
<body>
<div class="input-group">
    <form method="post" action="">
        <select id="day" name="day" autocomplete="off" class="select-box">
            <option hidden selected selected value="0" >Day</option>
            <?php
            for ($i = 1; $i <= 31; $i++) {
                echo "<option value=\"$i\">$i</option>";
            }
            ?>
        </select>
        <select id="month" name="month" autocomplete="off" class="select- 
box">
            <option hidden selected value="0" >Month</option>
            <!-- Rest of your month options -->
        </select>
        <select id="year" name="year" autocomplete="off" class="select- 
box">
            <option hidden selected value="0" >Year</option>
            <!-- Rest of your year options -->
        </select>
        <input type="submit" name="submit-button" value="Submit">
    </form>
</div>
</body>
</html>

赞(0）回复(0）举报 2023-09-28

5rgfhyps3#

使用此代码，红色边框和样式将仅在您提交表单后应用，并且您输入的日期有问题。当你第一次加载页面时，一切看起来都很正常，没有任何红色边框

<?php
$currentDate = null;
$date = null;
$usersday = null;
$usersyear = null; 
$usersmonth = null;
$diff = null;
$users_age = null;

// Check if the form has been submitted
if (isset($_POST['submit-button'])) {
    $usersday = (int)$_POST['day']; 
    $usersyear = (int)$_POST['year']; 
    $usersmonth = (int)$_POST['month'];

    // Check if a full date has been selected
    if ($usersday !== 0 && $usersmonth !== 0 && $usersyear !== 0) {
        $date = new DateTime("$usersyear-$usersmonth-$usersday");
        $today = new DateTime('today');
        $diff = $today->diff($date);
        $users_age = $diff->format('%y');
    }
}

// Check if there are issues with the user's input and apply red border styles
if ((!isset($_POST['submit-button'])) || ($usersday === 0 && $usersmonth !== 0) || ($usersyear === 0 && $usersmonth !== 0) || $users_age < 13) {
    echo <<<CSS
        <style>
            #day, #year {
                border-color: #ff0000;
            }
            .birthday-label {
                color: #ff0000;
            }
        </style>
    CSS;
}
?>

赞(0）回复(0）举报 2023-09-28

我来回答

html 选择框边框未正确加载颜色

3条答案

相关问题

热门标签

最新问答