Реально на форму наложить изображение

[serg_life]

 

Картинка посредине прозрачная, я наложил её на форму поиска с помощью  position absolute

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

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

  

 

[Great Rash]

Я так понимаю, что проблема в том, что поле поиска не получает фокус при клике. В этом случае у вас есть три пути:
 
1) Обернуть картинку в <label> - в этом случае по клику на него фокус будет передаваться соответствующему полю (которое будет указано в атрибуте for)

2) Отменить клики для этого блока - использовать правило pointer-events: none;, правда поддержка браузерами (ИЕ) оставляет желать лучшего.

3) Разрезать таки эту картинку на кусочки.

[Alarr]

Тут гораздо проще делается.
http://joxi.ru/WL217ddUYJoQrX
Берёте, и делаете картинку которую я выделил зелёным цветом. Только без текста на кнопке и плейсхолдера. И ставите её на фон формы.
А сверху, то что выделено красным - ставите прозрачный инпут, с бэкграундом транспарент, и серым плейсхолдером. Ну и кнопку тоже прозрачной делайте, только текст чтоб был виден, и всё.

Edited October 14, 2015 by Alarr

[ShumNo]

Может сверху на картинку просто положить input  ?

[serg_life]

  On 10/14/2015 at 8:17 AM, Great Rash said:

Я так понимаю, что проблема в том, что поле поиска не получает фокус при клике. В этом случае у вас есть три пути:

 

1) Обернуть картинку в <label> - в этом случае по клику на него фокус будет передаваться соответствующему полю (которое будет указано в атрибуте for)

2) Отменить клики для этого блока - использовать правило pointer-events: none;, правда поддержка браузерами (ИЕ) оставляет желать лучшего.

3) Разрезать таки эту картинку на кусочки.

1) Попробывал первый способ все получается на картинку добавил свойство cursor text что бы был вид при наведении на текстовое поле. Но проблема в том что картинка то больше  и как бы не очень красиво получается при наведении еще до поля курсор меняется. Но работает.

2) Это как раз тот способ который я искал, не знал за свойство pointer-events none; ну как и сказал в EI 10 и ниже не работает. В 11 и выше работает.

3) не вариант. Пробывал там получается левая часть картинки закрывает начало поля если по макету делать. Картинка то квадратная будет  все ровно. 

Спс. за ответ нашел что искал )

  On 10/14/2015 at 8:57 AM, Alarr said:

Тут гораздо проще делается.

http://joxi.ru/WL217ddUYJoQrX

Берёте, и делаете картинку которую я выделил зелёным цветом. Только без текста на кнопке и плейсхолдера. И ставите её на фон формы.

А сверху, то что выделено красным - ставите прозрачный инпут, с бэкграундом транспарент, и серым плейсхолдером. Ну и кнопку тоже прозрачной делайте, только текст чтоб был виден, и всё.

Да делал я уже в 6 утра как то не додумался, а потом когда написал и ложился спать то в голову пришла такая идея, что можно сделать фон а input наложить без фона. Но я сейчас еще в процессе обучения и не ищу легких путей, набираюсь опыта.   

  On 10/14/2015 at 10:43 AM, ShumNo said:

Может сверху на картинку просто положить input  ?

Можно, но меня интересовал способ типа:  (2) Отменить клики для этого блока - использовать правило pointer-events: none;) 

Обучаюсь, ищу что то новенькое, набираюсь опыта.

[Alarr]

Однако, простота - сестра таланта

[serg_life]

  On 10/19/2015 at 10:32 AM, Alarr said:

Однако, простота - сестра таланта

Мы не ищем легких путей когда учимся )

[Almag13]

реально наложить...

[serg_life]

  On 10/19/2015 at 9:34 PM, Almag13 said:

реально наложить...

Ну не придирайся к словам.  Хотя что-то смешное есть