- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
我需要使用我的自定义 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>
我不知道我在这里错过了什么。我需要用标志旁边的自定义样式替换默认的替换单选按钮。
任何替代答案将不胜感激。
最佳答案
或许,您可以尝试负边距而不是使用 z-index。试试这个代码。
z-index:-1;
会超出模态,因为模态的 z-index 是 999
或 9999
像这样它非常大。
所以尝试给负边距它不会影响任何东西
.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;
opacity:0;
}
.langflag input[type="radio"] + i{
width:18px;
height:18px;
top:4px;
left:0;
border-radius:100%;
border:1px solid #e5e5e5;
margin-left: -20px;
display:inline-block;
}
.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>
关于javascript - 负 z-index 在模态内不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52941425/
我在一个C++程序中找到了一段代码,好像每隔for()循环两次。在这个程序中循环,但为什么在这样的预处理器定义中需要第三个 for 呢? #define for for(int z=0;z<2;++z
我正在尝试分割其中有一个小写字母后跟一个大写字母的文本。 假设文本是: “Įvairių rūšiųSkinti kardeliai” 我想在“ųS”处拆分它,但是以下正则表达式“[ą-ž][Ą-Ž]
这个问题在这里已经有了答案: Reference - What does this regex mean? (1 个回答) 关闭 2 年前。 下面的正则表达式有什么区别。对我来说,它们都是一样的 [
我正在尝试用 Java 编写一个正则表达式: "/[A-Z]{6}-[A-Z]{4}-[A-Z]{4}/" 但是它不起作用。例如 "AASAAA-AAAA-AAAA".matches("/[A-Z]{
我需要确定一个字符串是否是一个变量标识符。 即(a-z,A-Z,,$) 后跟 (a-z,A-Z,0-9,,$) 我知道我可以使用手动配置的 reg exp 来完成它,但必须有一个更紧凑的内置函数我可以
早上好,我是新来的,我带来了一个小问题。我无法针对以下问题开发有效的算法:我需要找到三个正数 x、y 和 z 的组合,以便 x + y、x - y、y + z、y - z、x + z 和 x - z
这个问题已经有答案了: How does the ternary operator work? (12 个回答) 已关闭 6 年前。 我发现了一种不同的返回值的方式,并且很兴奋。它到底是什么意思? 如
我需要以下正则表达式,允许 [a-zA-Z]+ 或 [a-zA-Z]+[ \\-]{0,1}[a-zA-Z]+ 所以我想在 a-zA-Z 字符之间允许无限的减号和空格 示例: sdfsdfdsf-sf
我正在编写一个代码,它以“代码”(编码理论)作为输入,并且我已经计算了它的权重枚举器。我想使用 MacWilliams Identity 找到双代码的权重枚举器. 我有W(z) ,代码的权重枚举器,我
我已经编写了一个 child 文字游戏,现在我正在尝试优化性能。游戏以一种特殊的方式从数据库中挑选关键词,我想做得更好。 给定一个按字母数字排序的 MySQL 关键字字段: keyword s
假设一个字符串是abc/xyz/IMPORTANT/DATA/@#!%@!%,我只想要IMPORTANT/DATA/!%#@%!#% 我对正则表达式很烂,而且真的还没学过 JavaScript API
JS代码: ? 1
大家晚上好我想知道有没有更快的方法来生成以下形式的列表? [a,b,c,…,z] → [[z], [y,z], [x,y,z], … , [a,b,…,y,z]] 我知道切片是最好的方法之一,但没有更
我在 Firefox 和其他浏览器上遇到嵌套 z-index 的问题,我有一个 div,z-index 为 30000,位于 label 下方> zindex 为 9000。我认为这是由 z-inde
我正在尝试制作一个灯泡。这是代码 JSfiddle HTML 查询 $('.button').click(function() { $('#add').show();
在您想将嵌套模块导入命名空间的情况下,我总是这样写: from concurrent import futures 不过,我最近意识到这也可以使用“as”语法来表达。请参阅以下内容: import c
我正在尝试创建一个基本上复制 matlab 命令的函数:[z;-z] 其中 z = randn(m,n) 返回一个 m -by-n 随机条目矩阵。我能够在 C++ 中为下面的 randn 函数创建一个
好吧,我迷失在这些指针中,有人能准确地告诉我 char * x,y,z; 和 char* x,y,z 之间的区别是什么; 和 char (*)x,y,z; ?如果可以,请为您的答案或其他内容提供资源。
这是一道函数依赖题。 我知道当 x->yz 然后 x->y 和 x->z 时。但是上面的依赖关系可能吗? 最佳答案 If xy determines z can x determine z and y
我有一个列表列表 nLedgers - 一个 3D 点云: [nodeID, X, Y, Z] 多行。一些节点将具有相同的 X 和 Y 坐标以及不同的 Z 坐标。 我想首先确定具有相同 X 和 Y 坐
我是一名优秀的程序员,十分优秀!