Php 在CSS中创建选择框

我正在尝试制作以下表格：

我现在有这个，但有几个问题

悬停需要一个边界半径 在右上角需要一个字体图标 如何更改图标的颜色 有三个不同的框，但只能选择一个。正确的编程方式是什么。 以后还需要添加php，但如何添加。 /*结帐单*/ .选择框{ 宽度：255px； 高度：180像素； 保证金：20px 0px 20px 0px； 填充：30px； 边框：1px实心E3E4EA； 边界半径：6px； 颜色：5A637F； 文本对齐：居中； 字体风格：斜体； 字号：600； 背景色：F7F7FA； } .选择框：悬停{ 外形：5px实心76A7E1； 边界半径：6px； } 身体{ 字体系列：“Raleway”，无衬线； 保证金：0； -webkit字体平滑：抗锯齿； 显示器：flex； 显示：-webkit flex； 弯曲方向：立柱； -webkit柔性方向：列； 身高：100%； 颜色：54637F； } Stap 1:kies uw pakket 廉价包装 廉价包装 廉价包装 看看这个：

你需要隐藏。图标，并用javascript显示它

/* CHECKOUT FORM */

.selection-box {
width: 255px;
height: 180px;
margin: 20px 0px 20px 0px;
padding: 30px;
border: 1px solid #E3E4EA;
border-radius: 6px;
color: #5A637F;
text-align: center;
font-style: oblique;
font-weight: 600;
background-color: #F7F7FA;
}

.selection-box:hover {
border: 5px solid #76A7E1;
border-radius: 6px;
}

body {
    font-family: 'Raleway', sans-serif;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
    height: 100%;
    color: #54637F;
}

.icon{
  border-radius: 15px;
  width:30px;
  height:30px;
  background-color:#76A7E1;
  position:relative;
  top:40px;
  left:235px;
  /*display:none;*/
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<h1><strong style="font-size: 16px;">Stap 1: kies uw pakket</strong></h1>
<div class="row">
<div class="col-sm-4">
<div class="icon"></div>
<div class="selection-box">
<i class="fa fa-car fa-4x" aria-hidden="true"></i><br>Budget akket</div>
</div>
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-fighter-jet fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
<div class="col-sm-4">
<div class="selection-box"><i class="fa fa-car fa-4x" aria-hidden="true"></i><br>Budget pakket</div>
</div>
</div>

---

您可以试试这个，它可能会帮助您在这种情况下不需要使用Javascript

   <ul id="theme-options1" class="nav nav-pills  custom">
                            <li class="active">

                                <a data-toggle="tab" id="theme1" data-id="1">
                                    <i class="fa fa-check them-Selected" aria-hidden="true" ></i>
                                </a>
                            </li>
                            <li>

                                <a data-toggle="tab" id="theme2" data-id="2">
                                    <i class="fa fa-check them-Selected" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>

                                <a data-toggle="tab" id="theme3" data-id="3">
                                    <i class="fa fa-check them-Selected" aria-hidden="true"></i>
                                </a>
                            </li>
                            <li>

                                <a data-toggle="tab" id="theme4" data-id="4">
                                    <i class="fa fa-check them-Selected" aria-hidden="true"></i>
                                </a>
                            </li>
                        </ul>

---

寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是以最短的代码。请看，您可以使用jquery脚本来完成此任务，谢谢，但它只需要在鼠标悬停时显示。您必须包含LibrarySey。我想我错过了jquery.min.js，但我不知道如何解决这个问题。我正在使用WordPress将所有这些按相同顺序添加到主布局顶部我已经使用了这些库。这是我的网站网址：