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自定義複選框將東西浮動到左邊

回答

相關問題