Checkbox с пользовательским изображением

Question

Основываясь на моем последний вопрос Radio button with custom image,

запрашивающего решение для пользовательских флажков с помощью :before

решения принято из @Tambo выглядит следующим образом. Нужна настройка для использования с флажками на одном шаблоне решения (умный и лаконичный). Благодарю.

CSS

[type=radio]{ 
    position: relative; 
    margin: 40px 
} 

[type=radio]:before{ 
    content: ''; 
    position: absolute; 
    left: -15px; 
    top: -15px; 
    width: 32px; 
    height: 32px; 
    background: red 
} 

[type=radio]:checked:before{ 
    background: green 
} 

HTML

<input type=radio name=radio /> 
<input type=radio name=radio /> 
<input type=radio name=radio /> 

Answer 1

попробовать это

[type=checkbox]{ 
 
    position: relative; 
 
    margin: 40px 
 
} 
 

 
[type=checkbox]:before{ 
 
    content: ''; 
 
    position: absolute; 
 
    left: -15px; 
 
    top: -15px; 
 
    width: 32px; 
 
    height: 32px; 
 
    background: red 
 
} 
 

 
[type=checkbox]:checked:before{ 
 
    background: green 
 
}

<input type=checkbox name=radio /> 
 
<input type=checkbox name=radio /> 
 
<input type=checkbox name=radio />