Question

HTML通过php回应。 html页面显示了一个表，每个行的末尾都有一个复选框，以便可以选择多行。下面给出的是这样做的HTML。 HTML通过PHP回应，因为需要对许多行重复这些：

foreach ($_SESSION['userdata'] as $row) 
{
  echo '
    <tr>

        <td style="vertical-align: middle; text-align: center;">'.$row['Symbol'].'</td>
        <td style="vertical-align: middle; text-align: center;">'.$row['Name'].'</td>
        <td style="vertical-align: middle; text-align: center;">'.$row['MarketCap'].'</td>
        <td style="vertical-align: 

        <td style="vertical-align: middle; text-align: center;">
        <input type="checkbox" name="stocks[]" value="'.$row['Symbol'].'">
        <label></label>
        </td>                                           
    </tr>       
        ';
}

echo '<tr>
    <td style="vertical-align: middle; text-align: center; float: right;"><input type="submit" name="submit" value="Select"/></td>
    </tr>
</form>';

CSS的复选框为：

input[type="checkbox"],
input[type="radio"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    -ms-appearance: none;
    appearance: none;
    display: block;
    float: left;
    margin-right: -2em;
    opacity: 0;
    width: 1em;
    z-index: -1;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
    text-decoration: none;
    color: #ffffff;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    font-family: "Source Sans Pro", Helvetica, sans-serif;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 300;
    padding-left: 2.4em;
    padding-right: 0.75em;
    position: relative;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-transform: none !important;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
    background: rgba(255, 255, 255, 0.025);
    border-radius: 5px;
    border: solid 2px rgba(255, 255, 255, 0.125);
    content: '';
    display: inline-block;
    height: 1.65em;
    left: 0;
    line-height: 1.58125em;
    position: absolute;
    text-align: center;
    top: 0;
    width: 1.65em;
}

input[type="checkbox"]:checked + label:before,
input[type="radio"]:checked + label:before {
    background: #ffffff;
    border-color: #ffffff;
    content: '\f00c';
    color: #2e3141;
}

Answer 1

注意：

好像您需要从CSS中删除一些代码才能使其正常工作..

将代码的第一个CSS部分替换为：

 input[type="checkbox"],
input[type="radio"] {
    display: block;
    margin-right: -2em;
    opacity: 100;
    width: 1em;
    z-index: -1;
}

使用JSFiddle链接：https://jsfiddle.net/tL7uvgu0/2/

HTML中的复选框无效。单击复选框时没有任何反应。如何使它工作？

1 个答案:

注意：