Изображение в inputtext с границы в CSS

Question

Если вы видите на картинке ниже вы можете увидеть, что входной текст состоит из изображения, как background.But я хочу, чтобы держать линию между текстом и image.Either по применяя границу изображения ... или любой другой трюк. Я не могу найти точный пример или учебник или трюк. Потому что я применяю изображение в качестве фона. Так что я не могу применить границу ...

background: url ("~/application /modules/User/externals/images/mail.png ") no-repeat scroll 10px 11px #FFFFFF; размер фона: 20px 20px;

Answer 1

Раствор для значков в входов с помощью элемента этикетки с for="" атрибутом

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

Проверьте это fiddle

Answer 2

В моих угадываю вы можете сделать это с помощью border-right:1px solid #333 как,

<div> 
    <span style="border-right:1px solid #333"><img src="path-to-image" alt=""/></span> 
    <input type="text" /> 
</div> 

В качестве альтернативы, вы можете добавить separator или border в вас images как,

CSS

img{ 
    border-right:1px solid #333; 
} 

Answer 3

Вы можете сделать

ввод {background-image: url.jpg; box-shadow: 0 4px 0 4px black; }

Это должно создать сплошную 4-красную черную правую сторону. Настройте соответственно

Answer 4

вы можете разместить изображение в промежутке и установить только его правую границу ... вы можете изменить высоту пролета в соответствии с желанием, тег, содержащий диапазон, должен быть применен с использованием свойства overflow: hidden; чтобы работать по-разному, или просто вы можете добавить строку к своему изображению.