Вы, конечно, можете,
Кнопки
Checkboxes и Radio легко настраиваются с помощью всего лишь css (без js).
Реализация (уже упомянутая KunalB выше) включает в себя скрытие ввода и использование метки (с псевдоэлементом before для пользовательского изображения) для запуска ввода
Dropdowns с другой стороны, намного сложнее , и на сегодняшний день нет 100% кросс-браузерного решения pure-css + ... (Вот мой SO ответ для выпадающих меню)
LIVE DEMO для всех 3: переключателей, флажков и выпадающих меню.
Пользовательский флажок
<div>
<input checked="checked" id="RememberMe" name="RememberMe" type="checkbox">
<label for="RememberMe">Remember me</label>
</div>
CSS
input[type="checkbox"] {
display:none;
}
input[type="checkbox"] ~ label {
display:inline;
font-size: 18px;
}
input[type="checkbox"] ~ label:before {
content: '';
width: 32px;
height: 32px;
background: url(http://dl.dropbox.com/u/51558405/unchecked.png) no-repeat;
display: inline-block;
cursor: pointer;
vertical-align: middle;
margin-right: 3px; /*rtl*/
}
input[type="checkbox"]:checked ~ label:before {
content: '';
background: url(http://dl.dropbox.com/u/51558405/checked.png) no-repeat;
}
Пользовательский переключатель
<ul>
<li>
<input type="radio" id="radio1" name="radios" checked />
<label for="radio1">Apples</label>
</li>
<li>
<input type="radio" id="radio2" name="radios" />
<label for="radio2">Pineapples </label>
</li>
</ul>
CSS
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
display:inline;
font-size: 18px;
}
input[type="radio"] + label:before {
content: '';
display:inline-block;
width: 32px;
height: 32px;
background: url(http://dl.dropbox.com/u/51558405/radio-checked.png) no-repeat;
vertical-align: middle;
}
input[type="radio"]:checked + label:before {
content: '';
background: url(http://dl.dropbox.com/u/51558405/radio-unchecked.png) no-repeat;
}
Custom Dropdown
<!--[if !IE]> --> <div class="notIE"> <!-- <![endif]-->
<label />
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> --></div> <!-- <![endif]-->
CSS
label {
position: relative;
display: inline-block;
}
select {
display: inline-block;
padding: 4px 3px 5px 5px;
width: 150px;
outline: none;
color: #74646e;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #ddd8dc;
background-color: #fff;
}
/* Select arrow styling */
.notIE label:after {
content: '';
width: 23px;
height: 23px;
position: absolute;
display: inline-block;
top: 4px;
right: 4px;
background: url(http://www.stackoverflow.com/favicon.ico) no-repeat right center white;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width:0\0) {
.notIE label:after
{
display:none;
}
}