如何用CSS、PHP、HTML实现骰子数字转图片及自定义Checkbox样式？

一、将数字替换为骰子图片 #

方法1：PHP直接输出图片标签 #

把原来展示数字的输入框替换为<img>标签，PHP根据随机数拼接对应图片路径：

<?php
// 生成5个骰子的随机点数
$diceNumbers = [];
for ($i = 0; $i < 5; $i++) {
    $diceNumbers[] = rand(1, 6);
}
?>

<!-- 骰子展示区域 -->
<div class="dice-container">
    <?php foreach ($diceNumbers as $index => $num): ?>
        <div class="dice-item">
            <!-- 替换输入框为骰子图片 -->
            <img src="dice-<?php echo $num; ?>.png" alt="骰子点数<?php echo $num; ?>" class="dice-img">
            <!-- 保留hold复选框（后续改造样式） -->
            <input type="checkbox" id="hold-<?php echo $index; ?>" name="hold[]" value="<?php echo $index; ?>">
            <label for="hold-<?php echo $index; ?>">Hold</label>
        </div>
    <?php endforeach; ?>
</div>

确保你有命名为dice-1.png到dice-6.png的骰子图片，放在网站可访问的目录下。

方法2：纯CSS绘制骰子（无需图片） #

如果没有图片资源，可通过CSS网格绘制骰子点数，PHP给元素添加对应类名：

<div class="dice-container">
    <?php foreach ($diceNumbers as $index => $num): ?>
        <div class="dice-item">
            <div class="dice dice-<?php echo $num; ?>"><?php echo getDiceDots($num); ?></div>
            <input type="checkbox" id="hold-<?php echo $index; ?>" name="hold[]" value="<?php echo $index; ?>">
            <label for="hold-<?php echo $index; ?>">Hold</label>
        </div>
    <?php endforeach; ?>
</div>

配套PHP函数生成对应数量的点数元素：

<?php
function getDiceDots($num) {
    $dots = '';
    for ($i = 0; $i < $num; $i++) {
        $dots .= '<span class="dot"></span>';
    }
    return $dots;
}
?>

对应的CSS样式：

.dice {
    width: 50px;
    height: 50px;
    border: 2px solid #333;
    border-radius: 8px;
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background-color: #fff;
}
.dice .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #333;
}
/* 不同点数的位置布局 */
.dice-1 .dot { grid-area: 2 / 2; }
.dice-2 .dot:nth-child(1) { grid-area: 1 / 1; }
.dice-2 .dot:nth-child(2) { grid-area: 3 / 3; }
.dice-3 .dot:nth-child(1) { grid-area: 1 / 1; }
.dice-3 .dot:nth-child(2) { grid-area: 2 / 2; }
.dice-3 .dot:nth-child(3) { grid-area: 3 / 3; }
.dice-4 .dot:nth-child(1) { grid-area: 1 / 1; }
.dice-4 .dot:nth-child(2) { grid-area: 1 / 3; }
.dice-4 .dot:nth-child(3) { grid-area: 3 / 1; }
.dice-4 .dot:nth-child(4) { grid-area: 3 / 3; }
.dice-5 .dot:nth-child(1) { grid-area: 1 / 1; }
.dice-5 .dot:nth-child(2) { grid-area: 1 / 3; }
.dice-5 .dot:nth-child(3) { grid-area: 2 / 2; }
.dice-5 .dot:nth-child(4) { grid-area: 3 / 1; }
.dice-5 .dot:nth-child(5) { grid-area: 3 / 3; }
.dice-6 .dot:nth-child(1) { grid-area: 1 / 1; }
.dice-6 .dot:nth-child(2) { grid-area: 1 / 3; }
.dice-6 .dot:nth-child(3) { grid-area: 2 / 1; }
.dice-6 .dot:nth-child(4) { grid-area: 2 / 3; }
.dice-6 .dot:nth-child(5) { grid-area: 3 / 1; }
.dice-6 .dot:nth-child(6) { grid-area: 3 / 3; }

二、自定义Checkbox样式（无JS） #

通过CSS隐藏原生复选框，用关联的<label>标签模拟样式，利用:checked伪类实现选中状态：

<!-- 修改后的复选框结构 -->
<div class="dice-item">
    <!-- 骰子部分（图片或CSS骰子） -->
    <div class="dice dice-<?php echo $num; ?>"><?php echo getDiceDots($num); ?></div>
    <!-- 隐藏原生复选框 -->
    <input type="checkbox" id="hold-<?php echo $index; ?>" name="hold[]" value="<?php echo $index; ?>" class="hold-checkbox">
    <!-- 自定义样式的label -->
    <label for="hold-<?php echo $index; ?>" class="hold-label"></label>
    <span class="hold-text">Hold</span>
</div>

对应的CSS：

/* 隐藏原生复选框 */
.hold-checkbox {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
/* 默认状态的自定义复选框 */
.hold-label {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #999;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
    vertical-align: middle;
    margin-right: 6px;
}
/* 选中状态样式 */
.hold-checkbox:checked + .hold-label {
    background-color: #4CAF50;
    border-color: #4CAF50;
}
/* 选中时的对勾 */
.hold-checkbox:checked + .hold-label::after {
    content: "";
    display: block;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin: 2px 6px;
}
/* hover效果 */
.hold-label:hover {
    border-color: #666;
}
.hold-text {
    vertical-align: middle;
}

三、完整表单逻辑（PHP处理摇骰子） #

用PHP结合Session保存骰子状态，实现保留选中骰子的功能：

<?php
session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $heldDice = isset($_POST['hold']) ? $_POST['hold'] : [];
    $diceNumbers = isset($_SESSION['dice']) ? $_SESSION['dice'] : array_fill(0, 5, rand(1,6));
    
    // 重新生成未被hold的骰子
    for ($i = 0; $i < 5; $i++) {
        if (!in_array((string)$i, $heldDice)) {
            $diceNumbers[$i] = rand(1,6);
        }
    }
    $_SESSION['dice'] = $diceNumbers;
} else {
    // 首次加载生成初始骰子
    $diceNumbers = array_fill(0, 5, rand(1,6));
    $_SESSION['dice'] = $diceNumbers;
}
?>

<form method="POST" action="">
    <div class="dice-container">
        <?php foreach ($diceNumbers as $index => $num): ?>
            <div class="dice-item">
                <div class="dice dice-<?php echo $num; ?>"><?php echo getDiceDots($num); ?></div>
                <input type="checkbox" id="hold-<?php echo $index; ?>" name="hold[]" value="<?php echo $index; ?>" class="hold-checkbox">
                <label for="hold-<?php echo $index; ?>" class="hold-label"></label>
                <span class="hold-text">Hold</span>
            </div>
        <?php endforeach; ?>
    </div>
    <button type="submit" class="roll-btn">Roll Dice</button>
</form>

内容的提问来源于stack exchange，提问作者RImuru Tempest