Html css样式的单选按钮因背景图像而无法工作
我使用样式化的css单选按钮 问题是他们手动给出单选按钮的高度(即30px),文本溢出到下一行 所以我试着去掉手动高度。然后,由于背景图像用作背景位置,因此存在更多问题:( 这里使用的背景图像类似于下面的img 下面是单选按钮的css脚本Html css样式的单选按钮因背景图像而无法工作,html,css,background,radio,Html,Css,Background,Radio,我使用样式化的css单选按钮 问题是他们手动给出单选按钮的高度(即30px),文本溢出到下一行 所以我试着去掉手动高度。然后,由于背景图像用作背景位置,因此存在更多问题:( 这里使用的背景图像类似于下面的img 下面是单选按钮的css脚本 input[type=radio].css-checkbox { display:none; } input[type=radio].css-checkbox + label.css-label { padding-left:35px;
input[type=radio].css-checkbox {
display:none;
}
input[type=radio].css-checkbox + label.css-label {
padding-left:35px;
height:30px;
display:inline-block;
line-height:30px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:20px;
vertical-align:middle;
cursor:pointer;
}
input[type=radio].css-checkbox:checked + label.css-label {
background-position: 0 -30px;
}
label.css-label {
background-image:url({{ URL::to('/') }}/application/assets/img/checkbox.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
这是标记
<ul>
<li><input type="radio" name="answer2671" id="radio12344" class="css-checkbox" value="1" /><label for="radio12344" class="css-label radGroup1">Planning and strategy</label></li>
<li><input type="radio" name="answer2671" id="radio12345" class="css-checkbox" value="2" /><label for="radio12345" class="css-label radGroup1">Supporting your teammates</label></li>
<li><input type="radio" name="answer2671" id="radio12346" class="css-checkbox" value="3" /><label for="radio12346" class="css-label radGroup1">Motivating everyone</label></li>
<li><input type="radio" name="answer2671" id="radio12347" class="css-checkbox" value="4" /><label for="radio12347" class="css-label radGroup1">Courage in the face of adversity</label></li>
</ul>
- 规划和战略
- 支持你的队友
- 激励每个人
- 面对逆境的勇气
感谢任何形式的帮助!删除高度、线条高度,并在标签上添加一些顶部和底部填充物
input[type=radio].css-checkbox + label.css-label {
padding:20px 0 20px 35px;
display:inline-block;
background-repeat:no-repeat;
background-position: 0 0;
font-size:20px;
vertical-align:middle;
cursor:pointer;
}
将您的CSS更改为他的:
ul {
width:240px;
}
li {
list-style-type:none;
padding:5px 5px;
margin:5px 0 20px;
line-height:15px
}
input[type=radio].css-checkbox {
display:none;
}
.quiz-question-block.qhidden {
display:none;
}
input[type=radio].css-checkbox + label.css-label {
padding-left:45px;
height:32px;
display:inline-block;
line-height:30px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:20px;
vertical-align:middle;
cursor:pointer;
}
input[type=radio].css-checkbox:checked + label.css-label {
background-position: 0 -32px;
}
label.css-label {
background-image:url('http://i.stack.imgur.com/KLQO2.png');
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
你需要根据自己的需要进行调整,我还限制了表单的宽度,以便于可视化,但你会明白的
编辑:另一个选项是修改图像并使其高度更大,两种状态之间有很大的间隔,只需将CSS调整为新的图像大小,包括标记将有助于lot@Fabio我添加了标记。谢谢!很抱歉没有帮助。单选按钮显示的就像我在帖子上分享的第三张图片。它是looks擅长小提琴。我的代码的主要区别是什么?您需要调整
LI
元素,然后从那里调整INPUT
元素,因为您是相对于包含的块元素定位的(在本例中,是LI,但也可以是DIV)。然后,您可以选择修改图像,使其高度更大,两种状态之间有较大的间隔,并简单地将CSS调整为新图像大小。您可以用最后一条评论更改答案吗?我很乐意接受它作为答案。