Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.87/30: Рейтинг темы: голосов - 30, средняя оценка - 4.87
 Аватар для htmlcss
0 / 0 / 0
Регистрация: 29.08.2013
Сообщений: 60

Кнопка-картинка в текстовом поле!

17.10.2013, 15:47. Показов 6363. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Приветствую всех знатоков! Прошу помочь найти наилучши способ вставки картинки (в качестве кнопки) в поле формы Search. Перепробоваль все что знаю... Работаю в HTML 4.01 Transitional/CSS 2.1(WinXP SP3). Для кроссбраузерности не годится, вылетает....
Благодарю за помощь!
____________
C уважением, htmlcss
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
17.10.2013, 15:47
Ответы с готовыми решениями:

Кнопка и картинка
Здраствуйте. Столкнулся с такой проблемой, верстаю сайт с pdf файла. на картинке кнопка submit серого цвета, прямоугольная и маленького...

Картинка-кнопка
Простите за тупой вопрос) вот код страницы <!doctype html> <html> <head> <meta charset="utf-8"> <title>Персональный...

Кнопка - Картинка
сделал кнопку - картинку, cвойство value = "" но поверх кртинки всё равно красуется надпись Submit Query! как ее убоать!?

8
 Аватар для palva
4278 / 2970 / 693
Регистрация: 08.06.2007
Сообщений: 9,927
Записей в блоге: 5
17.10.2013, 17:37
Очень непонятно написано. Что такое поле формы? margin? Что такое форма Search и чем она отличается от обычной формы? Что вылетает?
0
 Аватар для htmlcss
0 / 0 / 0
Регистрация: 29.08.2013
Сообщений: 60
17.10.2013, 18:04  [ТС]
Цитата Сообщение от htmlcss Посмотреть сообщение
Прошу помочь найти наилучши способ вставки картинки (в качестве кнопки) в поле формы Search...
Попробую объяснить наглядно. В файле изображено поле поисковой системы с кнопкой в виде лупы. Мне нужно сделать так, чтобы в разных браузерах расположение лупы не изменялось (с учетом техограничений WinXP SP3).
Надеюсь, что объяснить корректно удалось. Заранее благодарю за помощь!
___________
C уважением, htmlcss
Миниатюры
Кнопка-картинка в текстовом поле!  
0
 Аватар для palva
4278 / 2970 / 693
Регистрация: 08.06.2007
Сообщений: 9,927
Записей в блоге: 5
17.10.2013, 18:14
Ага, то есть картинку вам надо разместить в поле ввода справа. Я так понимаю, что здесь можно применить абсолютное позиционирование. Картинка должна плавать над полем.
0
 Аватар для htmlcss
0 / 0 / 0
Регистрация: 29.08.2013
Сообщений: 60
17.10.2013, 18:39  [ТС]
думаю, что да. С возможностями ХР...

Добавлено через 5 минут
Вот как я решил задачу.
html:
HTML5
1
2
3
4
5
6
<div id="search">
                    <form name="search" method="post" action="">
                        <input type="text" id="field" class="shade" value="Search here ..." onFocus="if(this.value='Search here ...') this.value='';" onBlur="if(!this.value) this.value='Search here ...';">
                            <input type="image" src="imgs/searchGlass.png" alt="" id="searchGlass"></input>
                        </input>    
                    </form>
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
#search{
                    outline:1px solid #fccc25;
                    width:236px;
                    height:76px;
                    margin:0 auto;
                    }
                    input#field{
                        width:220px;
                        height:28px;
                        line-height:28px;
                        color:#f4f2ea;
                        border:0px solid #f4f2ea;
                        border-radius:5px;
                        -webkit-border-radius:5px;
                        background-color:transparent;
                        margin:23px 5px;
                        padding-left:5px;
                        font-size:14px;
                        position:relative;
                        }
                        #searchGlass{
                            width:26px;
                            height:22px;
                            cursor:pointer;
                            position:absolute;
                            top:px;
                            right:px;
                            }
0
17.10.2013, 18:59

Не по теме:

А причем тут вообще XP?

0
 Аватар для htmlcss
0 / 0 / 0
Регистрация: 29.08.2013
Сообщений: 60
17.10.2013, 20:25  [ТС]
в html5 работать не удается, чтобы видеть все эффекты и т.д. в IE 7-8... ("я так думаю!")
0
 Аватар для FromHeaven
16 / 22 / 1
Регистрация: 05.12.2018
Сообщений: 84
06.12.2018, 11:45
Для чего вам нужна кроссбраузерность, я так и не пойму, задача, вроде решена правильно. С чем именно возникают трудности?..
0
06.12.2018, 12:48

Не по теме:

FromHeaven, 2013 год... серьезно?

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
06.12.2018, 12:48
Помогаю со студенческими работами здесь

Кнопка-картинка как ей изменить цвет при наведении
Здравствуйте есть кнопка - это изображение png как этой кнопке изменить цвет при наведении на нее?

Съезжает картинка-кнопка отправки данных формы в Google Chrome
Помогите, пожалуйста! У меня в Google Chrome съезжает картинка-кнопка отправки данных формы:( Скрин во вложении. А это фрагмент кода css: ...

Как сохранить ENTER в текстовом поле?
Добрый день. Как в обычном текстовом поле поставить ENTER? Чтобы при отправке на почту сохранились а не шли друг за другом. Пример....

Форма поиска (поле+кнопка)
Добрый день. Возникла такая проблемка с формой поиска. Давайте для начала выложу код: &lt;div class=&quot;searchPosit&quot;...

HTML. Отображение принятых данных в форме (текстовом поле)
День добрый! Сразу скажу, что в HTML и веб я первоклассный чайник) Есть задача - отправлять данные на страницу сайта (в странице нужно...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru