鼠标按下和鼠标悬停事件的样式复选框
Styling Checkbox on Mousedown and Mouseup Events
我正在尝试制作可以按下以选择/取消选择的复选框"按钮"。我遇到的问题是,当标签处于活动状态时,它无法完全识别我应用的样式。我希望按钮在视觉上看起来好像已被按下,但现在无法识别 css 中的顶部边框。看起来好像正在按下按钮,但由于顶部边框不起作用,它会移动下面的按钮,就好像没有添加顶部边框一样。如果可以在Javascript中使用Mousedown和Mouseup执行此操作,请告诉我。
http://jsfiddle.net/jasonniebauer/sf3W8/
<div id="card_acceptance">
<p>
Select all that apply:
</p>
<input type="checkbox" id="mc_credit" value=""/>
<label for="mc_credit" name="mc_credit_button">
MC Credit
</label>
<input type="checkbox" id="visa_credit" value=""/>
<label for="visa_credit">
Visa Credit
</label>
<input type="checkbox" id="discover_credit" value=""/>
<label for="discover_credit">
Discover Credit
</label>
<input type="checkbox" id="amex_id" value=""/>
<label for="amex_id">
AMEX
</label>
<input type="checkbox" id="pin_debit" value=""/>
<label for="pin_debit">
PIN-Based Debit
</label>
</div>
#card_acceptance p {
font-size: 1.125em;
margin-bottom: .5rem;
}
#card_acceptance input[type="checkbox"] + label,
#card_acceptance2 input[type="checkbox"] + label {
box-sizing:border-box;
padding: 1rem 3rem 1rem 3rem;
width: 100%;
display: block;
color: #BDC3C7;
background-color: #F2F2F2;
text-align: center;
vertical-align: middle;
cursor: pointer;
border-bottom: 4px solid #BDC3C7;
border-radius: 3px;
margin-bottom: 1rem;
}
#card_acceptance input[type="checkbox"] + label:hover,
#card_acceptance2 input[type="checkbox"] + label:hover {
background: #E8E8E8;
color: #898989;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
-webkit-transition-property: border, color, background-color;
-webkit-transition-duration: 0.25s, 0.25s, 0.25s;
-webkit-transition-timing-function: linear, linear, linear;
-webkit-transition-delay: initial, initial, initial;
transition: border .25s linear, color .25s linear, background-color .25s linear;
transition-property: border, color, background-color;
transition-duration: 0.25s, 0.25s, 0.25s;
transition-timing-function: linear, linear, linear;
transition-delay: initial, initial, initial;
}
#card_acceptance input[type="checkbox"] + label:active,
#card_acceptance2 input[type="checkbox"] + label:active {
border-bottom: 0px;
border-top: 4px #FFFFFF;
border-radius: 3px;
}
#card_acceptance input[type="checkbox"]:checked + label,
#card_acceptance2 input[type="checkbox"]:checked + label {
background-color: #3498DB;
color: #FFFFFF;
outline: 0;
border-bottom: 4px solid #217DBB;
}
#card_acceptance input[type="checkbox"]:checked + label:hover,
#card_acceptance2 input[type="checkbox"]:checked + label:hover {
background-color: #258CD1;
color: #FFFFFF;
-webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
-webkit-transition-property: border, color, background-color;
-webkit-transition-duration: 0.25s, 0.25s, 0.25s;
-webkit-transition-timing-function: linear, linear, linear;
-webkit-transition-delay: initial, initial, initial;
transition: border .25s linear, color .25s linear, background-color .25s linear;
transition-property: border, color, background-color;
transition-duration: 0.25s, 0.25s, 0.25s;
transition-timing-function: linear, linear, linear;
transition-delay: initial, initial, initial;
}
#card_acceptance input[type="text"],
#card_acceptance2 input[type="text"] {
margin-bottom: 1rem;
display: none;
}
#card_acceptance input[type="checkbox"] {
display: none;
}
}
边框声明需要包含边框样式
#card_acceptance input[type="checkbox"] + label:active,
#card_acceptance2 input[type="checkbox"] + label:active {
border-bottom: 0px;
border-top: 4px solid #FFFFFF;
border-radius: 3px;
}
相关文章:
- 使用CSS将鼠标悬停在子对象上时,删除父对象上的悬停样式
- 鼠标按下和鼠标悬停事件的样式复选框
- 按住鼠标时如何保持光标样式相同
- Jquery动画鼠标光标不,单击后样式不更改
- CSS 导航链接样式:删除其他元素的样式,并在将鼠标悬停在选定元素上时删除双边框
- 将鼠标悬停在另一个元素上时更改元素样式
- 鼠标上的JavaScript过度更改BODY样式.鼠标悬停时反转
- 如何在鼠标悬停时更新repeat中元素的样式
- 将鼠标悬停在表上,用jquery更改另一个元素样式,只适用于1毫秒
- 将鼠标悬停在其他onpage元素上时更改点样式
- 禁用css-应用悬停样式点击,并重新应用时,鼠标移动n像素
- 如何改变光标样式时,鼠标悬停在谷歌图表API与Javascript
- jQuery:添加类
鼠标悬停,以样式 - jQuery悬停时,元素仍然保留悬停类.当鼠标悬停时,应该删除这个类样式
- 如何为画布“绘制样式”获得平滑的鼠标事件应用程序
- 当应用鼠标悬停样式时,通过箭头键导航删除应用于列表项的选定类
- 将鼠标指针更改为锚点样式
- KineticJS -使用url自定义鼠标光标样式
- 当鼠标悬停时,改变与id和类相关的元素样式
- CSS3 Flip Dropdown Menu-将鼠标悬停在子菜单上时保留主菜单悬停样式