Мне нужно настроить радио-кнопку с помощью моего пользовательского css
Это почти работает, но я столкнулся с проблемой.Я не знаю, почему z-index (-1) не работает внутри модального
Вот мой код
.container{
padding:50px;
width:100%;
}
.langsection .langname{
width:50%;
float:left;
}
.langsection .langflag{
width:50%;
float:left;
text-align:right;
}
.modal.langmod .modal-dialog{
width:400px;
margin:50px auto 0;
background:#fff;
border-radius:6px;
border:none;
}
.modal .modal-body{
padding:0;
border-radius:6px;
overflow:hidden;
}
.selclang li{
list-style:none;
text-transform:uppercase;
padding:10px 15px;
border-bottom:1px solid #e5e5e5;
}
.modal-dialog::after{
content:"";
clear:both;
display:table;
}
.selclang{
margin:0;
padding:0;
}
.langflag span.flg_icn{
padding-right:20px;
}
.langflag span{
display:inline-block;
}
.selclang li.active, .selclang li:hover{
background:#A40030;
color:#fff;
}
.modal.fade.in{
padding:0;
}
.modal.langmod .modal-content{
border:none;
}
.modal.langmod p{
text-transform:uppercase;
width:200px; margin:auto;
text-align:center;
}
.langflag input[type="radio"]{
width:18px;
height:18px;
z-index:88;
opacity:0;
}
.langflag input[type="radio"] + i{
width:18px;
height:18px;
position:absolute;
top:4px;
left:0;
border-radius:100%;
border:1px solid #e5e5e5;
z-index:-1;
}
.langflag input[type="radio"]:checked + i{
box-shadow:0 0 3px 0 rgba(0,0,0,0) inset;
background:green;
}
.flg_slct{
position:relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal langmod fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content clearfix">
<div class="modal-body">
<ul class="selclang">
<li class="active">
<div class="langsection clearfix">
<div class="langname">English</div>
<div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
</div>
</li>
<li>
<div class="langsection clearfix">
<div class="langname">Nederlands</div>
<div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
</div>
</li>
<li>
<div class="langsection clearfix">
<div class="langname">Deutch</div>
<div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
</div>
</li>
<li>
<div class="langsection clearfix">
<div class="langname">Jezyk Polski</div>
<div class="langflag"><span class="flg_icn">Flag</span><span class="flg_slct"> <input type="radio" name="language"><i></i></span></div>
</div>
</li>
</ul>
<p>choose your language kies uw taal wahlen sie ihre sprache wybierz swoj jezyk</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Я не знаю, что мне здесь не хватает.Мне нужно заменить радиокнопку по умолчанию на мой собственный стиль, который находится рядом с флагом.
Любые альтернативные ответы будут оценены.