CSS自定义复选框将东西浮动到左边

我有一个样式复选框，我希望在标签旁边有一个链接。标签有不同的宽度，所以我不能把链接相对于左侧。由于风格复选框，我不能用css'检测'标签的宽度。所以要说清楚，在jsfiddle中，我让链接信息位于标签的左侧。CSS自定义复选框将东西浮动到左边

http://jsfiddle.net/SAZ2P/3/

干杯！

CSS：

.selectbox { 
    position: relative; 
    display: inline-block; 
} 

.selectbox input[type="checkbox"] { 
    visibility: hidden; 
} 

.selectbox label { 
    cursor: pointer; 
    position: absolute; 
    width: 15px; 
    height: 15px; 
    top: 0; 
    background: #fcfff4; 
    border: 1px solid #000; 
    text-indent: 30px; 
    white-space: nowrap; 
    letter-spacing: 2px; 
    line-height: 17px; 
} 

.selectbox label:after { 
    opacity: 0; 
    content: ''; 
    position: absolute; 
    width: 6px; 
    height: 4px; 
    background: transparent; 
    top: 2px; 
    left: 3px; 
    border: 2px solid #333; 
    border-top: none; 
    border-right: none; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

.selectbox label:hover::after { 
    opacity: 0.5; 
} 

.selectbox input[type=checkbox]:checked + label:after { 
    opacity: 1; 
} 

.selectbox a{ 
    float: left; 
}

来源

2013-03-14 adnan

您没有检测到任何CSS的宽度 - 您使用JavaScript。 – 2013-03-14 20:46:55

是的，这就是为什么我把'检测'。我很难解释这个哈哈。顺便说一句，我不认为这是应该与JS – adnan 2013-03-14 20:59:46

解决的问题我认为你想要什么将帮助图。另外，样式复选框在浏览器中不稳定。 – 2013-03-14 21:03:47

我认为这将是最好的，包括标签内的链接。例如：

<div class="selectbox"> 
    <input type="checkbox" value="brand2" id="brand2" name="brand2" class="box"> 
    <label for="brand2"><a href="/link" id="brand_info">info</a> brand with longer name</label> 
</div>

来源

2013-03-14 22:04:23 Woodifer

谢谢，我认为如果我这样做，复选框会自动点击，但它不会。明显的解决方案ftw :) – adnan 2013-03-15 13:30:28

CSS自定义复选框将东西浮动到左边

回答

相关问题