-2

I am using HTML. How can i give a red line before the text box as in screen shot?

enter image description here

Thanks!

putvande
  • 15,068
  • 3
  • 34
  • 50
user1016403
  • 12,151
  • 35
  • 108
  • 137
  • A red line before the input? What does your HTML look like? What have you tried? That is basic HTML / CSS. – putvande Aug 16 '13 at 10:59
  • 1
    Use [CSS](http://www.htmldog.com/guides/css/beginner/). – robertc Aug 16 '13 at 11:00
  • You can put and element in the red place or put the input field inside the container with a little more width and float the input to right.But >>>> The easiest ways is to make the left border of the input wider and colored. – me_digvijay Aug 16 '13 at 11:01
  • A related note: css `:before` `:after` won't work with input eleemnts. http://stackoverflow.com/q/4574912/1273830 – Prasanth Aug 16 '13 at 11:10

6 Answers6

7

There is plenty ways, one of them is to place the input inside of a div and then style it with CSS.

Here is an example: 

<div style="border-left: 2px solid red; padding-left: 2px;">
    <input type="text" />
</div>

And here you can see how it looks like:

http://jsfiddle.net/r9MZN/

Miguel G. Flores
  • 802
  • 7
  • 21
3

you can do something like this :

here is a fiddle link

<div id="blc"><span>&nbsp;</span><input  type="text"/></div>

#blc span {
    border-left: 2px solid red;
}
Manish Kumar
  • 15,269
  • 5
  • 18
  • 27
1

You can use border-left css property

Yaro
  • 570
  • 3
  • 20
1

demo: http://jsfiddle.net/n7c8H/1/

html:

<div class="red-border-left">
    <input type="text" />
</div>

css:

.red-border-left {
    border-left: 2px solid #FF0000;
}
mtt
  • 1,697
  • 1
  • 15
  • 20
1

You could use CSS pseudo selector :before but since it doesn't work for Input elements, you need to look for other options,

E-g Insert a span before the input element and use pseudo selector on that. e-g:

<!DOCTYPE html>
<html>
  <head>
  <style>
    span:after{

      content:"";
      border:1px solid red;
      margin-right:5px;

      }
  </style>


  </head>

  <body>
     <span></span><input type="text" id="ttt" />
  </body>

</html>

DEMO

defau1t
  • 10,593
  • 2
  • 35
  • 47
0

Its like this one: 

<div class="redline"><input type="text" /></div>

For the css: 

.redline {
border-left: #hexcode;
}
Afzaal Ahmad Zeeshan
  • 15,669
  • 12
  • 55
  • 103