Стилизация input, закруглённые углы

@Kolovrat · Регистрация: 13.05.2012

Студворк — интернет-сервис помощи студентам

1. Можно ли как то разукрасить <input>? ну к примеру поле другого цвета и т.д. (я попробовал, но не получилось)
2. Как делаются закругленные углы? я находил пару уроков, но они написаны человеком не знающим русский язык

@newJS · 06.07.2012, 20:25

Другой цвет, это фон.
Круглые углы, можно самому инпуту дать, но это не все поддерживают.
Можно инпут сунуть в див с круглыми углами, а самому инпуту обнулить бордер.
Можно просто картинку нарисовать.
Вариантов много.

@mazeltov · 07.07.2012, 18:38

Сообщение от Kolovrat

я попробовал, но не получилось

А как пробовали?

KOPOJI · 08.07.2012, 16:52

Не по теме:

и где проверяли *

@Plug · 12.07.2012, 17:31

А можно ли тогда и кнопку изменить на свою? Или придется использовать img и изменяя изображение при наведении/нажатии ?

@mazeltov · 12.07.2012, 17:36

Plug, эм. Можно.

@Plug · 12.07.2012, 18:09

Сообщение от mazeltov

Plug, эм. Можно.

А как?

@mazeltov · 12.07.2012, 18:14

Plug, ну, как бы ничего особенного. например задаете кнопке какой-то класс и в css прописываете

CSS
1
2
3
.btn {
background: #cf0000;
}

и т.д.

@Kolovrat · 17.07.2012, 14:07 **[ТС]**

я пробовал задать фоновый цвет и границу как обычному блоку с помощью style и не вышло

киньте работающий пример и я сам разберусь

@_LoneR_ · 17.07.2012, 22:08

Kolovrat,

HTML5
1
<input type="text" class="text" />

CSS
1
2
3
4
.text{
  background-color: #f6f6f6; /*Цвет текстового поля*/
  border-radius: 10px 10px 10px 10px; /*Закругляем уголки*/
}

@Kolovrat · 17.07.2012, 22:30 **[ТС]**

я вроде так же пробовал, но возможно вместо class указал id. это важно? и кстати. чем отличается id от class???

@Soldado · 18.07.2012, 00:02

Вот такая кнопка, можно поэксперементировать "под себя", возьмите как образец:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.button {
                   border: 1px solid #DDD;
                   border-radius: 3px;
                   text-shadow: 0 1px 1px white;
                   -webkit-box-shadow: 0 1px 1px #fff;
                   -moz-box-shadow:    0 1px 1px #fff;
                   box-shadow:         0 1px 1px #fff;
                   font: bold 11px Sans-Serif;
                   padding: 6px 10px;
                   white-space: nowrap;
                   vertical-align: middle;
                   color: #666;
                   background: transparent;
                   cursor: pointer;
                }
                .button:hover, .button:focus {
                   border-color: #999;
                   background: -webkit-linear-gradient(top, white, #E0E0E0);
                   background:    -moz-linear-gradient(top, white, #E0E0E0);
                   background:     -ms-linear-gradient(top, white, #E0E0E0);
                   background:      -o-linear-gradient(top, white, #E0E0E0);
                   -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
                   -moz-box-shadow:    0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
                   box-shadow:         0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
                }

HTML5
1
<button class="button" role="button">Готово</button>

Можно и инпут задать подобным образом:

HTML5
1
<input type="text" class="button"/>

id - индивидуальный идент. применяется в документе для одного элемента.
class - можно задавать для группы элементов.
Касательно стилей у id выше приоритет.

@_LoneR_ · 18.07.2012, 00:07

Сообщение от Kolovrat

я вроде так же пробовал, но возможно вместо class указал id. это важно? и кстати. чем отличается id от class???

Та не может быть чтобы не работало, я сейчас блог свой пишу этим же методом стилизацию делал.
А покажите как вы таблицю стилей подключаете?

@Kolovrat · 18.07.2012, 13:03 **[ТС]**

я из таблицы стилей убрал это оформление прежнее. пока что не до этого. ну попоробую четко по вашему методу

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .

@Kolovrat 3 / 3 / 2 Регистрация: 13.05.2012 Сообщений: 230

	Стилизация input, закруглённые углы 06.07.2012, 17:55. Показов 52811. Ответов 13 Метки нет (Все метки) 1. Можно ли как то разукрасить <input>? ну к примеру поле другого цвета и т.д. (я попробовал, но не получилось) 2. Как делаются закругленные углы? я находил пару уроков, но они написаны человеком не знающим русский язык 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	06.07.2012, 20:25
	Другой цвет, это фон. Круглые углы, можно самому инпуту дать, но это не все поддерживают. Можно инпут сунуть в див с круглыми углами, а самому инпуту обнулить бордер. Можно просто картинку нарисовать. Вариантов много. 1

KOPOJI
	08.07.2012, 16:52
	Не по теме: и где проверяли * 0

@Plug 6 / 6 / 0 Регистрация: 16.05.2010 Сообщений: 98
	12.07.2012, 17:31
	А можно ли тогда и кнопку изменить на свою? Или придется использовать img и изменяя изображение при наведении/нажатии ? 0

@mazeltov 15 / 15 / 0 Регистрация: 07.08.2011 Сообщений: 46
	12.07.2012, 17:36
	Plug, эм. Можно. 1

@Kolovrat 3 / 3 / 2 Регистрация: 13.05.2012 Сообщений: 230
	17.07.2012, 14:07 [ТС]
	я пробовал задать фоновый цвет и границу как обычному блоку с помощью style и не вышло киньте работающий пример и я сам разберусь 0

@Kolovrat 3 / 3 / 2 Регистрация: 13.05.2012 Сообщений: 230
	17.07.2012, 22:30 [ТС]
	я вроде так же пробовал, но возможно вместо class указал id. это важно? и кстати. чем отличается id от class??? 0

@Kolovrat 3 / 3 / 2 Регистрация: 13.05.2012 Сообщений: 230
	18.07.2012, 13:03 [ТС]
	я из таблицы стилей убрал это оформление прежнее. пока что не до этого. ну попоробую четко по вашему методу 0