Нестандартный вид текстового поля

[Uncle Fox]

День добрый!

 

Возникла необходимость вместо стандартного прямоугольничка тега input сделать вот такое: ..................... и потом на эти точки вводить текст. Рылся пол-ночи в инете и ничего не нарыл Подскажите, как это можно сделать средствами css?

 

С ув. Uncle Fox

[Veseloff]

http://jsfiddle.net/vwnh4mfc/

[Uncle Fox]

Спасибо, получилось!!! Я так понимаю, это та же рамка, но видна только нижняя сторона в виде точек?

 

С ув. UncleFox

[Veseloff]

Именно так.

[Uncle Fox]

Рано обрадовался Под кнопкой ввод тоже точки. Если я кнопку ввод заменяю на картинку, то и под картинкой точки. Как это убрать? Пытаюсь сам, пока не выходит...

 

 #search {
    position: absolute;
    top: 35px;
    right: 275px;
    width: px;
    height: px;
}
  input {
    border: none;
    border-bottom: 2px dotted #000;
}

 

 

 <div id="search">
 <form name="search" method="post" action="input.php">
 П о и с к
 <input type="text" size="40">
 <input type="image" src="./pictures/lens.jpg">
 </form>
 </div>
 

 

С ув. UncleFox

Edited September 18, 2014 by Uncle Fox

[Нарек]

Так глобально задаете стили для input, а потом и кнопку через input хотите делать, поэтому и так. Дайте input полю класс и задавайте стили именно ему. Или же

http://jsfiddle.net/vwnh4mfc/1/

Edited September 18, 2014 by Нарек

[Veseloff]

Дайте input полю класс и задавайте стили именно ему

Именно так и надо сделать. Я просто показал как это можно реализовать, а уж как это использовать — это сами уже.

[Нарек]

Именно так и надо сделать. Я просто показал как это можно реализовать, а уж как это использовать — это сами уже.

Так я не Вас имел ввиду а Т.С. который написал

Рано обрадовался Под кнопкой ввод тоже точки. Если я кнопку ввод заменяю на картинку, то и под картинкой точки. Как это убрать?

 

[Veseloff]

Ну так и я тоже не вас. Это я выделил главное из вашего поста для ТС, чтобы он именно на это обратил внимаение

[Uncle Fox]

Спасибо, с классами все получилось, теперь без проблем.

 

  .input {
    border: none;
    border-bottom: 2px dotted #000;
}

 

<input class="input" type="text" size="50">

 

 

С ув. UncleFox

Edited September 20, 2014 by Uncle Fox