Question

我现在有这个但是有一些问题。

悬停需要border-radius
需要字体右上角的fontawesome图标
如何更改图标的颜色
有三个不同的盒子，但只能选择一个。什么是正确的编程方式。
还需要稍后添加php但是如何。

/* 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 {
outline: 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;
}

<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<h1><strong style="font-size: 16px;">Stap 1: kies uw pakket</strong></h1>
<div class="row">
<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 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>

Answer 1

看看这个：https://codepen.io/Luis4raujo/pen/JrLRMp

你需要隐藏.icon并用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>

Answer 2

你可以试试这可能对你有所帮助你不需要在这种情况下使用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>

Here is the Working fiddle

在CSS中创建选择框

2 个答案: