DIV+CSS中复选框的背景颜色不显示,但是边框显示,为啥?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了DIV+CSS中复选框的背景颜色不显示,但是边框显示,为啥?相关的知识,希望对你有一定的参考价值。

原生的checkbox样式不能满足咱们的需求。所以换种方式美化一下

首先,我们需要把checkbox的透明度设置为0: opacity: 0; 然后我们需要用到span,作为checkbox的选中状态显示。接着span一个背景icon,然后根据icon的分辨率尺寸大小设置背景图片的一些属性,关键是它: background-position-y: 20px;,目的是:当checkbox 未选中的时候,让背景图片挪到一个我们看不见的地方去,当checkbox 选中的时候,让背景图片再挪回来,也就是重置为0:background-position-y: 0px;,剩下的就是给它一个过渡效果,用户体验就更好啦,最后这样就达到我们的目的啦,具体代码如下:

完整代码:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>checkbox美化</title>

</head>

<style type="text/css">

#remember-password-container

width: 80px;

height: 24px;

position: absolute;

top: 50%;

left: 50%;

margin:-12px 0 0 -40px ;

text-align: center;

#remember-password-container .remember-password-content

position: relative;

#remember-password-container input[type=checkbox]

width: 16px;

height: 16px;

position: absolute;

opacity: 0;

cursor: pointer;

z-index: 2;

font-size: initial;

#remember-password-container .remember-me-label

color: #000;

margin-left: 25px;

cursor: pointer;

#remember-password-container .remember-me-label::selection

background: rgba(0,0,0,0);

#remember-password-container span

position: absolute;

top: 4px;

width: 14px;

height: 14px;

border: 1px solid #d6d6d6;

border-radius: 3px;

background: url(img/fork_green.png);

background-size: 14px;

background-repeat: no-repeat;

background-position-x: 0px;

background-position-y: 20px;

-webkit-transition: background-position-y 0.1s linear;

-o-transition: background-position-y 0.1s linear;

transition: background-position-y 0.1s linear;

#remember-password-container input[type=checkbox]:checked+span

background-position-y: 0px;

</style>

<body>

<div id="remember-password-container">

<div class="remember-password-content">

<input type="checkbox" id="remember-me-checkbox">

<span></span>

<label class="remember-me-label" for="remember-me-checkbox">记住我 </label>

</div>

</div>

</body>

</html>

参考技术A

复选框是 type="checkbox".

<input type="checkbox" style="background:#333; border:yellow 2px solid;" value="aaa"/>

<span style="background:#333; border:yellow 1px solid;">aaa</span>

<input type="checkbox" style="background:#333; border:#003 1px solid;" value="bbb"/>bbb

我试了一下,checkbox定义的border和bg都无效。

所以如果是想要给后面的字加bg和border的话,那就填个<span>好了

如果是要给前面那个选框添加背景什么的,要不就填个<div>把它放进去,然后给<div>定义样式?我没试过,你可以试试。

本回答被提问者和网友采纳
参考技术B 你是怎么写的?
例如:
<input type="text" style="border: 1px solid #000;color: #999;background: #ccc;" value="" />
这样就可以了!
希望能帮到你!

CSS中div背景与边框 颜色设置无效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 无标题文档</title>
<style>
/*通用样式--容器宽度值*/
.box width:302px; height:110px; margin:0 auto;
.box_1 width:300px; height:100px;border-left:1px solid; border-right:1px solid; overflow:hidden;
.box_1 div padding:10px;
/*上下圆角代码*/
.b1 , .b2 , .b3 , .b4 , .b5 , .b6 , .b7 , .b8 height:1px; font-size:1px; display:block; overflow:hidden;
.b1 , .b8 margin:0 5px;
.b2 , .b7 margin:0 3px; border-left:2px solid; border-right:2px solid;
.b3 , .b6 margin:0 2px; border-left:1px solid; border-right:1px solid;
.b4 , .b5 margin:0 1px; border-left:1px solid; border-right:1px solid; height:2px;
/*控制圆角颜色 就这里出问题,不能控制中间的div颜色(box_1)*/
.color1 .b2, .color1 .b3, .color1 .b4, .color1 .b5, .color1 .b6, .color1 .b7 , color1 .box_1 border-color:#00CC33;
.color1 .b1, .color1 .b8 background-color:#00CC33;
.color1 .b2, .color1 .b3, .color1 .b4, .color1 .b5, .color1 .b6, .color1 .b7 , color1 .box_1 background-color:#CCCCCC;

</style>
</head>

<body>
<div class="box color1">
<b class="b1"> </b> <b class="b2"> </b> <b class="b3"> </b> <b class="b4"> </b>
<div class="box_1">
<div>fdafjdsjfladjs</div>
</div>
<b class="b5"> </b> <b class="b6"> </b> <b class="b7"> </b> <b class="b8"> </b>
</div>
</body>
</html>

这里是源代码,其中box_1是包含在中间的div,但是通过设置颜色时无效,浏览时,<div class="box_1">这个颜色为黑色,背景为白色,css根本没有控制到。。。

请问高手是什么原因?

你太粗心了,color1 .box_1的样式前少写了一个点。
.color1 .b2, .color1 .b3, .color1 .b4, .color1 .b5, .color1 .b6, .color1 .b7 , color1 .box_1 border-color:#00CC33;
将其改为:
.color1 .b2, .color1 .b3, .color1 .b4, .color1 .b5, .color1 .b6, .color1 .b7 , .color1 .box_1 border-color:#00CC33;
就好了;
下面的背景色同理
参考技术A 主要是:.box_1 width:300px; height:100px;border-left:1px solid; border-right:1px solid; overflow:hidden;
这行代码的缘故,你给这行代码加一个background-color:#999999;这个层的背景颜色应该就有了,你的边框没有颜色是因为你这行代码中的border-left和border-right只设置了1px solid而没有设置颜色属性!你把他改成border-left:1px solid #999999; border-right:1px solid #999999;试试,应该就可以了。时间不多就写这么多吧,希望可以帮到你~
参考技术B 这两个地方是不是有问题?.color1
.b2,
.color1
.b3,
.color1
.b4,
.color1
.b5,
.color1
.b6,
.color1
.b7
,
color1
.box_1

border-color:#00CC33;
.color1
.b2,
.color1
.b3,
.color1
.b4,
.color1
.b5,
.color1
.b6,
.color1
.b7
,
color1
.box_1

background-color:#CCCCCC;
参考技术C 你根本也没为.box1设置背景色呀,你上哪去要求控制它呢?

以上是关于DIV+CSS中复选框的背景颜色不显示,但是边框显示,为啥?的主要内容,如果未能解决你的问题,请参考以下文章

CSS中div背景与边框 颜色设置无效

怎么用CSS来写DIV的内边框颜色 宽度?

用css的方法达到边框颜色渐变,最好支持chrome

div+css 边框渐变色怎么做啊?

div部分设置边框

CSS如何怎么设置div边框颜色宽度和高度