SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How could I implement this input border in CSS?

    How could I implement this border on a input field in css?



    I think there are many ways to do it but what would you recommend?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,614
    Mentioned
    413 Post(s)
    Tagged
    7 Thread(s)
    I don't see an image there. Could you post it as an attachment?

  3. #3
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry here it is gallery_1_6_1240.png

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    For ie9 and other modern browsers you could use border-radius and box shadow.

    e.g.


    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    input[type=text] {
    	width:293px;
    	padding:5px 10px;
    	margin:0;
    	border:1px solid #ddd;
    	-webkit-border-radius: 3px;
    	-moz-border-radius: 3px;
    	border-radius: 3px;
    	-webkit-box-shadow: 0px 0px 3px 3px #cccccc;
    	-moz-box-shadow: 0px 0px 3px 3px #cccccc;
    	box-shadow: 0px 0px 3px 3px #cccccc;
    	vertical-align:middle;
    	-webkit-background-clip: padding-box;
    	background-clip:padding-box;
    }
    label {
    	width:100px;
    	padding:0 10px 0 0;
    	display:inline-block;
    	vertical-align:middle;
    	text-align:right;
    }
    </style>
    </head>
    
    <body>
    <form name="form1" method="post" action="">
    		<fieldset>
    				<legend>Input test</legend>
    				<label for="name">Name:</label>
    				<input type="text" name="name" id="name">
    		</fieldset>
    </form>
    </body>
    </html>



    If you want ie8 and under support then you'd need to use a background image instead. Wrap a span around the input and make the span display:inline-block (and size it to match the input height and width) and then apply a background image to it. Next set the input to the same height and width and remove padding,margins, backgrounds and borders from the input.

  5. #5
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    122
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks paul. Though not exact, the css you gave me is very close

    EDIT: With a bit of modifying I can make it almost the exact same except the original has weird corners which I don't think I can replicate using css

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Glad you got it working

    I didn't really see in any weird corners in the drawing they just looked like a 2 or 3 pixel border radius to me.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •