Форма поиска

@timurkas · Регистрация: 19.08.2013

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

Привет всем!

В общем у меня такой вопрос, хотелось бы сделать фон формы поиска как у Яндекса примерно. Долго рыскал в интернете но так не че путного и не нашел.
Вот мой код поиска:

Что к нему нужно добавить чтобы был на подобий как у Яндекса?
Помогите кто чем может

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

Загружайте изображения и файлы на форум и прикрепляйте к сообщению.
https://www.cyberforum.ru/abou... post594251

@v1le · 19.08.2013, 19:08

это форма поиска в div. в div можно сделать любой фон и любое расположение input.
в яндексе это сделано так: внутри div'a - span, внутри него форма поиска + иконка. далее input.
дальше другой div с примером.

@Forastero · 19.08.2013, 21:59

Привет. Держите. Все-равно заняться было нечем.)
Там уже подправите если что.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="search">
    <input type="text"><input type="submit" value="Поиск">
    <p class="example">Например, <a href="#">как зовут билана</a></p>
    <div class="arrow"></div>
  </div>
</body>
</html>

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
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
 
.search {
  background: #FFCC00;
  padding: 5px;
  height: 75px;
  display: inline-block;
  position: relative;
}
 
.search > input[type=text] {
  width: 300px;
  height: 25px;
  outline: none;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.5);
  margin-right: 5px;
  line-height: 20px;
  text-indent: 5px;
  margin-bottom: 10px;
}
 
.search > input[type=submit] {
  height: 25px;
  width: 65px;
}
 
.search > .example {
  font: 12px/18px Verdana, Tahoma, Arial, sans-serif;
  color: 333;
  text-shadow: 1px 1px white;
  margin-bottom: 10px;
}
 
.search > .example a {
  text-decoration: none;
  border-bottom: 1px dotted;
}
 
.search > .arrow {
  position: absolute;
  left: 100%;
  top: 0;
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 37.5px 0 37.5px 30px;
  border-color: transparent transparent transparent   #FFCC00;
}

Песочница: http://jsbin.com/iSUpaNa/1/edit

@timurkas · 20.08.2013, 03:16 **[ТС]**

Тему можно закрыть, нашел хороший ответ здесь: https://www.cyberforum.ru/html5/thread940224.html

@timurkas · 20.08.2013, 03:26 **[ТС]**

Спасибо за помощь!Forastero,

Добавлено через 3 минуты
Forastero, Если не трудно ответь еще на один вопрос

Как можно изменить кнопку "поиск", допустим тоже как у яндекса или же Google?

Добавлено через 12 минут
Ну в смысле сам дизайн кнопки.

Название: XKEIksB1.png
Просмотров: 119

Размер: 596 байт

Название: XKEIksB1.png
Просмотров: 119

Размер: 596 байт

Название: NcW3RJNs.png
Просмотров: 118

Размер: 403 байт

@Ayzell · 20.08.2013, 08:57

Она и так как у Яндекс, если я не ошибаюсь. Просто в

HTML5
1
<input type="text"><input type="submit" value="Поиск">

заменить "Поиск" на "Найти" ?

@timurkas · 20.08.2013, 13:19 **[ТС]**

Ayzell, Нет видимо не поняли, сам дизайн кнопки, не надпись а дизайн, то есть как кнопка сама выглядит.

Вот как выглядит моя кнопка:
Название: HUSUr1Mt.png
Просмотров: 119

Размер: 318 байт

Название: HUSUr1Mt.png
Просмотров: 119

Размер: 318 байт

А хотелось бы как выше

Добавлено через 7 минут
Ответ нашел!
Вот интересная статья: http://www.my-article.net/get/... %D1%8E-css

@Forastero · 20.08.2013, 13:31

timurkas, это зависит от операционной системы и активности/неактивности визуальных эффектов.
На сколько я могу судить, у вас Windows, и включена классическая цветовая схема, либо отключены большинство визуальных эффектов. Честно скачать, я когда пользуюсь Windows, точно так же поступаю.)

К тому же, каждый браузер инпуты отображает по-своему. Имееся дефолтный набор стилей, которым браузер руководствуется.

К примеру, скриншот, которой я показал, я сделал со своего монитора. Так инпут отображается у меня.

Задайте самомой кнопке некие стили, чтобы она была кроссбраузерной. Что-то вроде:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.search > input[type=submit] {
  height: 25px;
  width: 65px;
  border-radius: 3px;
  border: 1px solid #ccc;
  box-shadow: inset -1px -1px rgba(0,0,0,.3);
  background: #ffffff;
background: -moz-linear-gradient(top,  #ffffff 0%, #d8d8d8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d8d8d8));
background: -webkit-linear-gradient(top,  #ffffff 0%,#d8d8d8 100%);
background: -o-linear-gradient(top,  #ffffff 0%,#d8d8d8 100%);
background: -ms-linear-gradient(top,  #ffffff 0%,#d8d8d8 100%);
background: linear-gradient(to bottom,  #ffffff 0%,#d8d8d8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d8d8d8',GradientType=0 );
  cursor: pointer;
}

Здесь имеется градиент, фиксированная ширина, высоты, границы...

@timurkas · 20.08.2013, 14:49 **[ТС]**

Forastero, Я знаю что кнопка зависит от системы. Вот как раз эффектов мне и не хватало. Спасибо еще раз!

Добавлено через 56 минут
Forastero, И снова у меня к вам вопрос

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

Вот как сейчас выглядит форма:

А хотелось чтобы у нее были закругленные формы как у этого рисунка:

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

Загружайте изображения и файлы на форум и прикрепляйте к сообщению.
https://www.cyberforum.ru/abou... post594251

@x00 · 20.08.2013, 18:02

Добавьте к search

CSS
1
border-radius:5px;

@Taatshi · 21.08.2013, 01:18

timurkas,

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

Нарушение правил форума, пункт 5.5

Запрещено размещать тему в нескольких разделах одновременно (кросспостинг), а также дублировать тему в одном разделе.

Новые блоги и статьи Все статьи Все блоги /
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 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@v1le 15 / 12 / 1 Регистрация: 01.06.2011 Сообщений: 225
	19.08.2013, 19:08
	это форма поиска в div. в div можно сделать любой фон и любое расположение input. в яндексе это сделано так: внутри div'a - span, внутри него форма поиска + иконка. далее input. дальше другой div с примером. 1

@timurkas 0 / 0 / 0 Регистрация: 19.08.2013 Сообщений: 5
	20.08.2013, 03:16 [ТС]
	Тему можно закрыть, нашел хороший ответ здесь: https://www.cyberforum.ru/html5/thread940224.html 0

@timurkas 0 / 0 / 0 Регистрация: 19.08.2013 Сообщений: 5
	20.08.2013, 03:26 [ТС]
	Спасибо за помощь!Forastero, Добавлено через 3 минуты Forastero, Если не трудно ответь еще на один вопрос Как можно изменить кнопку "поиск", допустим тоже как у яндекса или же Google? Добавлено через 12 минут Ну в смысле сам дизайн кнопки. 0

@timurkas 0 / 0 / 0 Регистрация: 19.08.2013 Сообщений: 5
	20.08.2013, 13:19 [ТС]
	Ayzell, Нет видимо не поняли, сам дизайн кнопки, не надпись а дизайн, то есть как кнопка сама выглядит. Вот как выглядит моя кнопка: А хотелось бы как выше Добавлено через 7 минут Ответ нашел! Вот интересная статья: http://www.my-article.net/get/... %D1%8E-css 0