Какой HTML/CSS вы использовали бы для создания ввода текста с фоном?

Ответ 1

Я бы сделал это следующим образом:

<style type="text/css">
div.custom {
    background:url(/images/input-bkg-w173.gif) no-repeat;
    padding:8px 5px 4px 5px;
}
div.custom input {
    background-color: #fff;
    border:none;
    font-size:10px;
}
</style>
<div class="custom"><input type="text" class="custom" size="12" /></div>

Вам просто нужно отрегулировать значения прокладки, чтобы все соответствовало правильно. Это - в моих глазах - определенно лучшее решение, поскольку в любом другом случае вы работаете со всем полем ввода. И все поле ввода - по определению - поле, в котором пользователи могут вводить текст.

Если вы можете положиться на JavaScript, вы можете программно обернуть такие div-Elements вокруг ваших полей ввода.

Edit: С помощью jQuery вы можете сделать это следующим образом:

$( 'input.custom' ).wrap( '<div class="custom"></div>' );

CSS

div.custom {
    background:url(/images/input-bkg-w173.gif) no-repeat;
    padding:8px 5px 4px 5px;
}
input.custom {
    background-color: #fff;
    border:none;
    font-size:10px;
}

И ваш HTML:

<input class="custom" ... />

Ответ 2

Вам не нужен элемент div, вы можете напрямую назначить фон для ввода.

Изменить: Вот рабочий код. Я протестировал его, но вам придется приспособить его для ваших нужд. Насколько я могу судить, все здесь необходимо.

input {
    background: #FFF url(test.png) no-repeat bottom right;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0;
    text-indent:3px;
    margin:0;
    border: none;
    overflow:hidden;
}

Edit2: Я не совсем уверен, почему я получаю downvoted, но этот метод должен работать, если вам не нужно изображение больше, чем сам элемент ввода. В этом случае вы должны использовать дополнительный элемент div. Однако, если изображение того же размера, что и вход, нет необходимости в дополнительной разметке.

Edit3: Хорошо, после того, как bobince указал на проблему, я немного подхожу. Это будет работа в IE6 & 7, и она закрывается в FF, но я все еще работаю над этой частью.

input {
    background: #FFF url(test.png) no-repeat 0px 0px;
    background-attachment:fixed;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0px;
    text-indent:3px;
    margin:0;
    border: none;
}
body>input {
    background-position:13px 16px;
}

Edit4: Хорошо, я думаю, что на этот раз я получил его, но для этого нужно использовать селектор CSS3, поэтому он не будет проверяться как CSS 2.1.

input { 
    background: #FFF url(test.png) no-repeat 0px 0px;
    background-attachment:fixed;
    width: 120px;
    height: 20px;
    line-height:20px;
    padding:0px;
    text-indent:3px;
    margin:0;
    border: none;
}
body>input { 
    background-position:13px 16px;
}
body>input:enabled { 
    background-position:9px 10px;
}

body > будет нацелен на все, кроме IE6, body > input: enabled будет нацелен на любые элементы формы, которые не будут отключены для всех браузеров, за исключением IE 6, 7 и 8. Однако, поскольку: enabled - это селектор CSS3, он не проверяется как CSS2.1. Мне не удалось найти подходящий селектор CSS2, который позволил бы мне отделить IE7 от других браузеров. Если не проверять (пока, пока валидатор не переключится на CSS3), это проблема для вас, тогда я думаю, что ваш единственный вариант - это дополнительный элемент div.

Ответ 3

Оцените ли вы фоновое изображение следующим образом:

<style type="text/css"> 
  input{ 
  background-color: #AAAAAA; 
  background-image: url('http://mysite.com/input.gif'); 
  border: 0px; 
  font-family: verdana; 
  font-size: 10px; 
  color: #0000FF; 
} 

Ответ 4

Я сделал это несколько раз. У меня есть фоновое изображение внутри div и используйте css, чтобы соответственно позиционировать поле ввода.

Загляните на следующий сайт, который я создал, который использовал эту технику и использовал код: http://www.ukoffer.com/ (правая часть информационного бюллетеня)

Ответ 5

AFAIK, проблема с прокруткой фона может быть решена либо в Firefox, либо у друзей, или в Internet Exploder; но не сразу сделать всех счастливыми.

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

В этом случае вы должны установить div как position: relative и поместить в него вход с правильным заполнением и шириной (или 100% шириной, если заполнение равно 0), фон прозрачен и поместить изображение в div.

Ответ 6

okoman получил правильный аспект CSS. Могу ли я предложить использовать <label> для улучшения семантической структуры разметки?

<label id="for-field-name" for="field-name">
    <span class="label-title">Field Name <em class="required">*</em></span>
    <input id="field-name" name="field-name" type="text" class="text-input" />
</label>

<style type="text/css">
    label, span.label-title { display: block; }
</style>

Мало того, что это более доступно, но оно обеспечивает множество перехватов, которые вы можете использовать для любого типа манипуляций с DOM, проверки или моделирования по-умолчанию в будущем.

Изменить: Если вы не хотите, чтобы название ярлыка отображалось по какой-либо причине, вы можете присвоить ему класс "доступности" и установить класс в display: none; в CSS. Это позволит читателям с экрана понимать входные данные, но скрывать их от обычных пользователей.

Ответ 7

Самый простой способ избавиться от переполнения без JavaScript просто:

• Создайте 3 пролета и установите их высоты на высоту изображение.
• Отрежьте изображение на 3 части, чтобы вы разрезали изображение таким образом, чтобы левая и правая части будут находиться на 1-м и 3-м изображениях соответственно.
• Установите фон 1-го интервала изображения с левой границей и установите его на no-repeat.
• Установите фон третьего пролета к изображению с правой границей и установите его на не повторять.
• Поместите ввод в средний промежуток, помните, что установите его высоту на высоту пролетов, а ее фон 2-е изображение и только для повтора-x.
• Это гарантирует, что вход будет отображаться горизонтально после ввода ввода. нет перекрытие и отсутствие необходимости в JS.

HTML Предполагая, что высота изображения составляет 60 пикселей, ширина первого и третьего пролетов составляет 30 пикселей,

<span id="first">nbsp;</span><br />
<span id="second"><input type="text" /></span><br />
<span id="third">nbsp;</span>

CSS

span#first{background:url('firstimage') no-repeat; height:60px; width:30px;}
span#third{background:url('thirdimage') no-repeat; height:60px; width:30px;}
span#second input{background:url('second image') repeat-x; height:60px;}

Это должно решить вашу проблему.