2015-11-05 95 views
0

此框用於過濾頁面上的內容。我從網站上下載了這個複選框,並試圖在它旁邊添加一個文本,但是我不能。文本不斷出現在複選框的相同位置。詢問在複選框旁邊添加文本

 <div class="roundedOne"> 

         <input class="swiftfilter" type="checkbox" data-container=".isotope-filter" data-search-in=".grid_6" value="france" data-child=".titledayarchivetour p" data-child-only="true" id="roundedOne" name="check" /> 
         <label for="roundedOne">CHOOSE FRANCE</label> 


    </div> 

.roundedOne { 
    width: 28px; 
    height: 28px; 
    background: #fcfff4; 
    float: left; 
    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0); 
    margin: 20px auto; 

    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    border-radius: 50px; 

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
    position: relative; 
} 

.roundedOne label { 
    cursor: pointer; 
    position: absolute; 
    width: 20px; 
    height: 20px; 

    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    border-radius: 50px; 
    left: 4px; 
    top: 4px; 

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); 
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); 
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1); 

    background: -webkit-linear-gradient(top, #222 0%, #45484d 100%); 
    background: -moz-linear-gradient(top, #222 0%, #45484d 100%); 
    background: -o-linear-gradient(top, #222 0%, #45484d 100%); 
    background: -ms-linear-gradient(top, #222 0%, #45484d 100%); 
    background: linear-gradient(top, #222 0%, #45484d 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222', endColorstr='#45484d',GradientType=0); 
} 

.roundedOne label:after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: alpha(opacity=0); 
    opacity: 0; 
    content: ''; 
    position: absolute; 
    width: 16px; 
    height: 16px; 
    background: #00bf00; 

    background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%); 
    background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%); 
    background: -o-linear-gradient(top, #00bf00 0%, #009400 100%); 
    background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%); 
    background: linear-gradient(top, #00bf00 0%, #009400 100%); 

    -webkit-border-radius: 50px; 
    -moz-border-radius: 50px; 
    border-radius: 50px; 
    top: 2px; 
    left: 2px; 

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5); 
} 

.roundedOne label:hover::after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; 
    filter: alpha(opacity=30); 
    opacity: 0.3; 
} 

.roundedOne input[type=checkbox]:checked + label:after { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 

enter image description here

回答

0

你必須從.roundedOne元素,並從labelposition:absolute;刪除width

Jsfiddle

+0

@kkat對您有幫助嗎? – Alex

+0

謝謝@Jsfiddle。但它仍然無法正常工作:( – KingkongP

+0

@kkat什麼你想要多少? – Alex