Как сверстать форму

@Maximka24 · Регистрация: 07.04.2014

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

Ребята, подскажите как сверстать форму. Проблема в border-radius и box-shadow. Спасибо за помощь)

@mrtoxas · 28.06.2016, 14:51

Приложите свои наработки с проблемой

@Maximka24 · 28.06.2016, 14:53 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form>
  <div class="form-group form-group-name">
    <label for="inputName">Name</label>
    <input type="text" id="inputName">
  </div>
div class="form-group form-group-email">
  <label for="inputEmail">Email</label>
  <input type="email" id="inputEmail">
</div>
<div class="form-group form-group-message">
  <label for="inputMessage">Message</label>
  <input type="text" id="inputMessage">
</div>
<button class="button">Send</button>
</form>

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
.form-group
    display: inline-block
    position: relative
    margin: 0
    overflow: hidden
    input
        outline: none
        box-shadow: none
        border: none
        padding: 22px 5px 5px 7px
        border-radius: 3px
    label
        position: absolute
        left: 7px
        top: 1px
        font-size: em(13px)
        font-family: "HelveticaNeueLTPro-Bd", sans-serif
        font-weight: normal
        color: #cacaca
 
.form-group-name
    input
        border-top: 1px solid #cccccc
        border-left: 1px solid #cccccc
        border-bottom: 1px solid #cccccc
        box-shadow: inset 0px 0px 5px 1px rgba(232,232,232,1)
.form-group-email
    input
        border-top: 1px solid #cccccc
        border-bottom: 1px solid #cccccc
 
.form-group-message
    input
        border-top: 1px solid #cccccc
        border-right: 1px solid #cccccc
        border-bottom: 1px solid #cccccc
 
.button
    display: inline-block
    border: 1px solid #fbc800
    border-radius: 3px
    background-color: $accent
    font-family: "HelveticaNeueLTPro-Bd", sans-serif
    font-weight: normal
    font-size: em(18px)
    color: #fff
    padding: 12px 33px
    transition: all .5s ease
    &:hover
        text-decoration: none
        color: #fff
        background-color: lighten($accent, 9%)
    &:focus
        text-decoration: none
        color: #fff
        background-color: darken($accent, 7%)

@Maximka24 · 28.06.2016, 15:01 **[ТС]**

Получается вот так) Не могу додуматься как по-середине убрать box-shadow и border-radius

@mrtoxas · 28.06.2016, 15:08

Сюда лучше скомпилированный код выкладывать. Поместите инпуты в контейнер и уже ему задайте скругление углов и тень, а не инпутам.

@Maximka24 · 28.06.2016, 15:13 **[ТС]**

Понял, спасибо, сейчас попробую!

@Maximka24 · 28.06.2016, 15:40 **[ТС]**

Как-то не получается.
Не могу скинуть скомпилированный код, так как он сразу галпом минифицируется
теперь тень пропала совсем
И соеденить их непонятно как((((

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
                    <form>
                        <div class="form-group form-group-name">
                            <label for="inputName">Name</label>
                            <div class="input-container">
                                <input type="text" id="inputName">
                            </div>      
                            
                        </div>
                        <div class="form-group form-group-email">
                            <label for="inputEmail">Email</label>
                            <div class="input-container">
                                <input type="email" id="inputEmail">
                            </div>
                            
                        </div>
                        <div class="form-group form-group-message">
                            <label for="inputMessage">Message</label>
                            <div class="input-container">
                                <input type="text" id="inputMessage">
                            </div>
                        </div>
                        <button class="button">Send</button>
                    </form>

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
form
    margin-top: 25px
 
.form-group
    display: inline-block
    position: relative
    margin: 0
    .input-container
        box-shadow: inset 0px 0px 5px 1px rgba(0,0,0,0.15)
        border-radius: 4px
        border: 1px solid #cccccc
        overflow: hidden
        input
            outline: none
            border: none
            padding: 22px 5px 5px 7px   
            
    label
        position: absolute
        left: 7px
        top: 1px
        font-size: em(13px)
        font-family: "HelveticaNeueLTPro-Bd", sans-serif
        font-weight: normal
        color: #cacaca

@mrtoxas · 28.06.2016, 16:02

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.wrapper {
  width: 50%;
  margin: 0 auto;
  font-size: 0;
  padding: 5px;
  border-radius: 10px;
  box-shadow: inset 0px 0px 5px 1px rgba(0, 0, 0, 0.15);
}
.wrapper .input-container {
  width: 33%;
  display: inline-block;
  font-size: 24px;
}
.wrapper .input-container label {
  padding-top: 0;
  font-size: 14px;
}
.wrapper .input-container input {
  border: 0;
  width: 100%;
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="wrapper">
  <div class="input-container">
    <label for="">Имя</label>
    <input type="text" />
  </div>
  <div class="input-container">
    <label for="">Почта</label>
    <input type="text" />
  </div>
  <div class="input-container">
    <label for="">Сообщение</label>
    <input type="text" />
  </div>
</div>

Результат

@Maximka24 · 28.06.2016, 16:08 **[ТС]**

Спасибо! С меня пиво!!!!

Новые блоги и статьи Все статьи Все блоги /
Мысли в слух. Про "навсегда". kumehtar 16.04.2026 Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .	My Business CRM MaGz GoLd 16.04.2026 Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .	Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .

@Maximka24 0 / 0 / 0 Регистрация: 07.04.2014 Сообщений: 48

	Как сверстать форму 28.06.2016, 14:45. Показов 2012. Ответов 8 Метки нет (Все метки) Ребята, подскажите как сверстать форму. Проблема в border-radius и box-shadow. Спасибо за помощь) Миниатюры 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	28.06.2016, 14:51
	Приложите свои наработки с проблемой 0

@Maximka24 0 / 0 / 0 Регистрация: 07.04.2014 Сообщений: 48
	28.06.2016, 15:01 [ТС]
	Получается вот так) Не могу додуматься как по-середине убрать box-shadow и border-radius Миниатюры 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	28.06.2016, 15:08
	Сюда лучше скомпилированный код выкладывать. Поместите инпуты в контейнер и уже ему задайте скругление углов и тень, а не инпутам. 0

@Maximka24 0 / 0 / 0 Регистрация: 07.04.2014 Сообщений: 48
	28.06.2016, 15:13 [ТС]
	Понял, спасибо, сейчас попробую! 0

@Maximka24 0 / 0 / 0 Регистрация: 07.04.2014 Сообщений: 48
	28.06.2016, 16:08 [ТС]
	Спасибо! С меня пиво!!!! 0

Как сверстать форму

Решение