Как убрать углы в форме с закругленным радиусом?

@Droleg · Регистрация: 15.06.2016

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

Доброе время суток!
Проблема моя, наверное, тривиальна, но я бьюсь, к сожалению, уже весь день...

У меня обычная форма ввода, для поискового запроса, с закругленными углами:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.input {
    border: 3px solid #dd4814;
    border-radius: 6px;
    background-color: transparent;
    padding: 4px;
    width: 250px;
    color: #6C6C6C;
    transition: all 0.4s ease-out;
}
.input:focus { 
    outline: none;
    border-color: #b22222;
}

Комментарий модератора

К css-стилям не забываем прикладывать html-код!

Как видно, на темном фоне остаются светлые уголки возле закруглений рамки. Хотел убрать их транспарентностью (background-color: transparent

, но не убираются. Убрать углы с помощью box-shadow не могу, т.к. фон с градиентом и будет некрасиво. Может кто-нибудь уже сталкивался с подобной проблемой? Что я делаю неправильно?
Спасибо!

@Xteda · 15.06.2016, 12:18

Просвечивает чей-то фон, родительского элемента.

@Droleg · 15.06.2016, 12:24 **[ТС]**

Да, у меня форма с автозаполнением, работает на jquery. Это и есть родительский элемент со своими стилями. Но там для этого элемента тоже проставлен background-color: transparent;
???

@Xteda · 15.06.2016, 12:32

значит еще выше родитель, давайте код сюда. Гадать никто не будет

@Fedor92 · 15.06.2016, 12:57

Droleg, елси инпут лежит в форме, тогда так:

CSS
1
form{border-radius:6px}

@Droleg · 15.06.2016, 13:01 **[ТС]**

Форма ввода вставлена в header:

HTML5
1
2
3
4
5
6
7
8
9
10
11
<header id="header">
    <div id="searchform_header">
        <form class="searchform_header" action="search.php" method="get">
        <fieldset>
            <input class="input" type="text" name="search"> </input>
            <input class="compare_button" type="submit" value="Search!"> </input>
        </fieldset>
        </form>
    </div>
<div class="clear"> </div>
</header>

input управляется, кроме того CSS, который я уже запостил, еще плагином для автозаполнения:

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
57
58
59
60
61
62
63
64
.autocomplete{
display:inline;
position:relative;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: start;
}
 
.autocomplete .input{
    position:relative;
    z-index:2;
    background-color:transparent;
}
.autocomplete .autocomplete_dropdown{
    position:absolute;
    border: 1px solid #ccc;
    border-top-color: #d9d9d9;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: default;
    display:none;
    z-index: 1001;
    margin-top:-1px;
    background-color:transparent;
    min-width:100%;
    overflow:auto;
}
.autocomplete .autocomplete_hint{
    position:absolute;
    z-index:1;
    color:#ccc !important;
    -webkit-text-fill-color:#ccc !important;
    text-fill-color:#ccc  !important;
    overflow:hidden !important;
    white-space: pre  !important;
}
 
.autocomplete .autocomplete_hint span{
    color:transparent;
    opacity: 0.0;
}
 
.autocomplete .autocomplete_dropdown > .autocomplete_copyright{
    color:#ddd;
    font-size:10px;
    text-decoration:none;
    right:5px;
    position:absolute;
    margin-top:-15px;
    z-index:1002;
}
.autocomplete .autocomplete_dropdown > div{
    background: rgb(85, 68, 0);
    white-space: nowrap;
    cursor: pointer;
    line-height: 1.5em;
    padding: 2px 0px 2px 0px;
}
.autocomplete .autocomplete_dropdown > div.active{
    background: rgb(255, 0, 0);
    color: #FFFFFF;
}

@Xteda · 15.06.2016, 13:02

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

Droleg, елси инпут лежит в форме, тогда так:

Не согласен с подходом, бордер должен быть закруглен у инпута, а не у все формы. Если после инпута встанет кнопка отправки, например, то закругление правых углов инпута пропадет.

Ищете через дебаггер элемент у которого стоит background: rgb(255,255,255). Скорее всего плагин наворачивает свою структуру и где-то стоит белый фон

@Fedor92 · 15.06.2016, 13:09

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

Не согласен с подходом, бордер должен быть закруглен у инпута, а не у все формы. Если после инпута встанет кнопка отправки, например, то закругление правых углов инпута пропадет.

Если она там встанет, но на скрине её пока нет...

@Droleg · 15.06.2016, 13:09 **[ТС]**

Так, я дико извиняюсь! Как всегда, недосмотрел код как следует. Собака была зарыта в

CSS
1
2
3
4
5
6
7
8
9
.autocomplete .autocomplete_hint{
    position:absolute;
    z-index:1;
    color:#ccc !important;
    -webkit-text-fill-color:#ccc !important;
    text-fill-color:#ccc  !important;
    overflow:hidden !important;
    white-space: pre  !important;
}

У меня там проставлен color:#ccc Это и был светлый фон. Так-что подсказка с родительским элементом здорово помогла, большущее спасибо!!

@Xteda · 15.06.2016, 13:12

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

Если она там встанет, но на скрине её пока нет...

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

@Fedor92 · 15.06.2016, 13:15

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

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

Ну ищите, убирайте, флаг в руки, как говорится...

Droleg, а теперь ткните пальцем хоть в один элемент, который имеет класс .autocomplete в html-коде...

@Droleg · 15.06.2016, 14:37 **[ТС]**

Fedor, да, извиняюсь, я, конечно, запостил не весь код... Класс .autocomplete у меня прописан гораздо выше. Плагин подключен скриптом, а в нем уже прописан .autocomplete
Но в любом случае намек на родительский элемент был толчком в нужном напрявлении. Спасибо, Xteda!

@Xteda · 15.06.2016, 14:42

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

Спасибо, Xteda!

Да не за что. Успехов

@Droleg · 15.06.2016, 14:43 **[ТС]**

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

Да не за что. Успехов

Вам также!

@Droleg · 15.06.2016, 14:54 **[ТС]**

Для полноты картины: чтобы поле ввода формы все-таки оставалось светлым, нужно еще задать border-radius в родительском элементе:

CSS
1
2
3
4
5
6
7
8
9
10
.autocomplete .autocomplete_hint{
    position:absolute;
    z-index:1;
    border-radius: 6px;
    color:#ccc !important;
    -webkit-text-fill-color:#ccc !important;
    text-fill-color:#ccc  !important;
    overflow:hidden !important;
    white-space: pre  !important;
}

(Иначе форма будет просвечивать насквозь до background)

Теперь все как надо!
Всем еще раз спасибо.

Новые блоги и статьи Все статьи Все блоги /
Модель заражения группы наркоманов alhaos 17.04.2026 Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .	Мысли в слух. Про "навсегда". 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. Задача: реализовать контроль корректности заполнения дат назначения. . .

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	15.06.2016, 12:18
	Просвечивает чей-то фон, родительского элемента. 0

@Droleg 1 / 1 / 2 Регистрация: 15.06.2016 Сообщений: 18
	15.06.2016, 12:24 [ТС]
	Да, у меня форма с автозаполнением, работает на jquery. Это и есть родительский элемент со своими стилями. Но там для этого элемента тоже проставлен background-color: transparent; ??? 0

@Xteda 62 / 53 / 35 Регистрация: 30.03.2015 Сообщений: 264
	15.06.2016, 12:32
	значит еще выше родитель, давайте код сюда. Гадать никто не будет 0

@Droleg 1 / 1 / 2 Регистрация: 15.06.2016 Сообщений: 18
	15.06.2016, 14:37 [ТС]
	Fedor, да, извиняюсь, я, конечно, запостил не весь код... Класс .autocomplete у меня прописан гораздо выше. Плагин подключен скриптом, а в нем уже прописан .autocomplete Но в любом случае намек на родительский элемент был толчком в нужном напрявлении. Спасибо, Xteda! 0

Как убрать углы в форме с закругленным радиусом?

Решение