關於Chrome的複選框問題

Hei guys，我對自定義複選框有點問題。 Everyhting在Mozilla中是可以的，但是當涉及到Chrome時，它的工作方式會有所不同。正如您在下面看到的那樣，第1列中的複選框在檢查時工作正常，但在其他列中檢查時僅提供背景。我在哪裏給所有複選框同樣的CSS。它在Mozilla中看起來不同，我的意思是它運行良好。關於Chrome的複選框問題

.listContent input[type=checkbox] { 
    opacity: 0; 
    float: left; 
} 
.listContent input[type=checkbox] + label { 
    margin: 0 0 0 8px; 
    position: relative; 
    cursor: pointer; 
    font-size: 16px; 
} 
.listContent input[type=checkbox] + label ~ label { 
    margin: 0 0 0 40px; 
} 

.listContent input[type=checkbox] + label::before { 
    content: ' '; 
    position: absolute; 
    left: -20px; 
    top: 2px; 
    border-radius: 4px; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    width: 14px; 
    height: 14px; 
    display: block; 
    background: white; 
    border: 1px solid #A9A9A9; 
} 
.listContent input[type=checkbox] + label::after { 
    content: ' '; 
    position: absolute; 
left: -19px; 
top: 3px; 
width: 16px; 
height: 16px; 
    display: block; 
    z-index: 1; 
    background: url('../../jpgs/checked.png') no-repeat center center; 
    transition: all .3s ease; 
    -moz-transition: all .3s ease; 
    -ms-transition: all .3s ease; 
    -o-transition: all .3s ease; 
    -webkit-transition: all .3s ease; 
    transform: scale(0); 
    -moz-transform: scale(0); 
    -ms-transform: scale(0); 
    -o-transform: scale(0); 
    -webkit-transform: scale(0); 
    transform: scale(0.7) !important; 
    opacity: 0; 
} 
.listContent input[type=checkbox]:checked + label::after { 
    transform: scale(1); 
    -moz-transform: scale(1); 
    -ms-transform: scale(1); 
    -o-transform: scale(1); 
    -webkit-transform: scale(1); 
    opacity: 1; 
} 
.listContent input[type=checkbox]:checked + label { 
    color: #64bd5f; 
} 
.listContent input[type=checkbox]:checked + label::before { 
    opacity: 1; 
    background: #64bd5f; 
}

來源

2016-08-12 Jamil Aliisgandarov

在首先的嘗試與該重置CSS：http://cssreset.com

來源

2016-08-12 21:14:05

檢查本網站CSS風格複選框：http://www.csscheckbox.com/。基本上，對於複選框樣式，您可以將背景圖像設置爲包含已選中和未選中狀態的複選框，並根據是否選中複選框來操作該圖像的背景位置。

例如：

input[type=checkbox].css-checkbox + label.css-label { 
         padding-left:21px; 
         height:16px; 
         display:inline-block; 
         line-height:16px; 
         background-repeat:no-repeat; 
         background-position: 0 0; 
         font-size:16px; 
         vertical-align:middle; 
         cursor:pointer; 

        } 

        input[type=checkbox].css-checkbox:checked + label.css-label { 
         background-position: 0 -16px; 
        }

我看到你做類似的東西，你是操作不透明，而不是背景位置。我認爲背景位置可能更容易實現，它與使用spritesheet基本相同。

來源

2016-08-12 21:17:04

我發現解決方案，'溢出：隱藏'的事情正在影響它。謝謝大家

來源

2016-08-15 11:52:14

關於Chrome的複選框問題

回答

相關問題