webew
Войти » Регистрация
 
CSS

Как можно задать стили оформления для элементов форм?

26 июня 2008, 12:23
Автор: lark
Подскажите, пожалуйста, можно ли с помощью .css задавать индивидуальные стили для элементов формы: флажков, радиокнопок, текстовых полей и т.д.
И как выравнивать надписи к тем же checkbox при помощи стилей? Подойдет ли для этого свойство "vertical-align"? (просто есть ощущение, что оно работает не для всех браузеров).
Добавить комментарий
Отображение комментариев: Древовидное | Плоское

bur

Пример блока и описание задачи в студию.
26.06.2008, 12:29
Ответить
NO USERPIC

lark

<form name="myForm" action="" method="">
<table>
    <tr>
        <td>Option:</td>
    </tr>
    <tr>
        <td>
        <select name="firstoption" id="firstoption">
        <option value="1">option1</option>
        <option value="2">option2/option>
        </select>
        </td>
    </tr>
    <tr>
        <td><input type="text" name="text1" size="10" maxlength="10"/> text field 1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkbox1" value="1"/>checkbox1 description</td>
    </tr>
</table>
</form>

Задачи:
1) сделать границы элементов "флажок", "селект" и текстового поля произвольным цветом
2) выровнять надпись "checkbox1 description" по центру флажка
26.06.2008, 12:56
Ответить

bur

Поменять границы у чекбокса и селекта не получится кроссбраузерно. С чекбоксом просто ничего не выйдет, а селект не изменит свой вид в ИЕ.

Остальное решено тут.

Только вместо селекторов input[type=checkbox] и input[type=text] лучше поставить классы, т.к. их (классы) понимает ИЕ6.

Но если вдруг очень-очень-очень нужно изменить дизайн чекбоксов и селектов, можно заделать их на JavaScript. Однако, это стоит делать только если "позади Москва".
26.06.2008, 13:39
Ответить
NO USERPIC

lark

Спасибо за ответ!
Вопрос не принципиальный (в смысле изменения цвета), просто было интересно, потому как решения не удалось найти в сети.
26.06.2008, 13:50
Ответить
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: