Вопрос по layout, input, css – Установка фона поля ввода

6

Я должен создать поле ввода со следующим фоном

enter image description here

Пока в моем коде есть код ниже, и он не отображается - & gt; Какова будет правильная процедура для этого?

У меня также есть несколько вариантов этой кнопки, которые я должен произвести, и они следующие:

A cross on the dark area of the button - I was just going to use a <span> tag with a class and set the graphic to that -> Would this be a good way to go?

A paper clip icon just after the curve on the left -> I was going to do the same as above -> Would this be a good way to go?

HTML:

<div class="innerTo">
        <form action="#" method="get">
           <label for="recipients">TO: </label>
              <input type="search" name="recipients" id="recipients" placeholder="Recipients Names">
    </form>
    </div>

CSS:

.innerBar .innerTo{
    width:200px;
    padding:5px 0 0 15px;
    display:block;
    float:left;
}
.innerBar .innerTo label{
    margin:0 15px 0 0;
    font-size:14px;
    font-weight:bold;
    color:#666666;
}
.innerBar .innerTo input[type=search] {
    color: red;
}
.innerBar .recipients{
    background-image:url('../images/searchBGpng.png') no-repeat;
    width:192px;
    height:27px;
}

Ваш Ответ

2   ответа
9

повозился:

<div class="input-container">
    <input type="text" value="aaaaaaaaaaaaaaaaaa"/>
</div>

..stack.imgur.com/0Vlc5.png) no-repeat;
    width:197px;
    height:28px;
}
.input-container input{
    height:28px;
    line-height:28px;/*results in nice text vertical alignment*/
    border:none;
    background:transparent;
    padding:0 10px;/*don't start input text directly from the edge*/
    width:148px;/*full width - grey on the side - 2*10px padding*/
}

Если вы планируете повторно использовать его с разной шириной, посмотритетехника раздвижных дверей.

Если высота строки установлена на полную высоту поля ввода, каретка будет выглядеть странно в Chrome в Windows. Есть идеи, как этого избежать?
@JessMcKenzie: также - не большой поклонник супа-поплавка - лично я установилposition:relative на контейнере и абсолютное положение значков против этого (вы могли бы даже расположить значкиoutside элемент контейнера с таким подходомleft:-20px;)
Спасибо, О.В. Правильный ли у меня подход к моим вариациям? Jess McKenzie
@damd: хмм ... определить "странное" или, может быть, добавить скриншот + версия Chrome #?
@JessMcKenzie: видя, как вы решили использоватьtype="search", вы должны быть в порядке с использованием псевдоэлементов, а не жестко закодированных пролетов и т. д. Одна из первых ссылок, которые появились:coding.smashingmagazine.com/2011/07/13/…
0

если вам это нравится, а затем применить его к HTML-коду

You can do this

HTML Code

<form action="#" method="get">
           <label for="recipients">TO: </label>
              <input type="search" name="recipients" id="recipients" placeholder="Recipients Names">
    <input type="submit" value="">
    </form>

Css Code

label{
float:left;
    margin:25px 0 0 0px;
    padding:0;
}

input[type="search"], input[type="submit"]{
margin:20px 0 0 0px;
    padding:0;
     line-height:28px;
    height:28px;
    background: url("http://i.stack.imgur.com/0Vlc5.png") no-repeat 0 0;
    border: 0 none;
    float:left;
}

input[type="search"]{
width:152px;
    padding-left:15px;
}

input[type="submit"]{
background-position:-167px 0;
    width: 30px;
    cursor:pointer;
}

Живая демо-ссылка здесьhttp://jsfiddle.net/AL6vb/4/

Теперь измените код в соответствии с вашим макетом, это только демонстрация .......

Похожие вопросы