首页 > 解决方案 > 如何在html中仅显示单选框的文本

问题描述

我正在尝试仅使用 HTML 和 CSS 制作日历,但是当用户单击一天时,它会更改某些属性。

我计划每天使用一个单选按钮。然而,使用单选按钮,它会显示一个小框。

所以我的想法是<input type="radio" id="" name="" value="">每天使用,然后只选择一天。

有人能帮我吗?这是我的日历的样子:

日历

<div id="speed">
<table style="width:25%">
    <tr>
        <td></td>
        <td><a href="12.php"><i class="fas fa-chevron-left"></i></a></td>
        <td colspan="2">January</td>
        <td><a href="2.php"><i class="fas fa-chevron-right"></i></a></td>
    </tr>
    <tr>
        <td>Sun</td>
        <td>Mon</td>
        <td>Tue</td>
        <td>Wen</td>
        <td>Thu</td>
        <td>Fri</td>
        <td>Sat⠀</td>
    </tr>
    <tr>
        <td class="gray">27</td>
        <td class="gray">28</td>
        <td class="gray">29</td>
        <td class="gray">30</td>
        <td class="gray">31</td>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
    <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
    </tr>
    <tr>
        <td>17</td>
        <td>18</td>
        <td>19</td>
        <td>20</td>
        <td>21</td>
        <td>22</td>
        <td>23</td>
    </tr>
    <tr>
        <td>24</td>
        <td>25</td>
        <td>26</td>
        <td>27</td>
        <td>28</td>
        <td>29</td>
        <td>30</td>
    </tr>
    <tr>
        <td>31</td>
        <td class="gray">1</td>
        <td class="gray">2</td>
        <td class="gray">3</td>
        <td class="gray">4</td>
        <td class="gray">5</td>
        <td class="gray">6</td>
        <td></td>
    </tr>
</table>

标签: htmlcss

解决方案


您可以使用 css 手动隐藏单选按钮单选。

[type='radio'] {
    display: none; 
}

<input type="radio" value="1">
<input type="radio" value="2">
<input type="radio" value="3">
<input type="radio" value="4">
<input type="radio" value="1">


推荐阅读