Solved

Add Color to text box border

Posted on 2007-11-16
7
1,578 Views
Last Modified: 2016-08-29
Using CSS, how do you create a color border around an input text box?

I'll post a link to a picture after I save this question.

Thanks much!

Cheers.


0
Comment
Question by:IT79637
  • 3
  • 2
7 Comments
 
LVL 1

Author Comment

by:IT79637
ID: 20299367
Here is the link to a sample page I got from PayPal...

https://filedb.experts-exchange.com/incoming/ee-stuff/5653-Input_Box_Border_Color_ccs.jpghttps://filedb.experts-exchange.com/incoming/ee-stuff/5655-Input_Box_Border_Color_ccs_1.jpg


I would like to be able to replicate the effect on my input elements.

Thanks
0
 
LVL 3

Accepted Solution

by:
kylealanhale earned 70 total points
ID: 20299430

<!-- for the element -->
 
<input class="blue-border" value="username" />
 
<!-- use this CSS -->
 
<style>
  input.blue-border {
    background-color: #fff;
    border-color: #86a3cf
  }
</style>
 
<!-- This uses the exact color from your sample image. -->

Open in new window

0
 
LVL 1

Author Comment

by:IT79637
ID: 20299752
Thanks for the code.  Worked first time.

Please pardon my old eyes, but the top and left border appear black to me.  The bottom and right border are the blue color fromthe sample.  Here is a link showing rendering in Firefox and ie6.

https://filedb.experts-exchange.com/incoming/ee-stuff/5653-Input_Box_Border_Color_ccs.jpghttps://filedb.experts-exchange.com/incoming/ee-stuff/5655-Input_Box_Border_Color_ccs_1.jpg


Please tell me it is my eyes.

Thanks,
Cheers
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 6

Assisted Solution

by:starfailure
starfailure earned 30 total points
ID: 20300224
Sounds like you want to change the border-style a little bit, too:

input.blue-border {
    background-color: #fff;
    border-color: #86a3cf;
      border-style:solid;
      border-width:1px;
  }
0
 
LVL 3

Expert Comment

by:kylealanhale
ID: 20300302
Yes, starfailure's addition should fix the problem.  Thanks for catching that.
0
 
LVL 1

Author Closing Comment

by:IT79637
ID: 31409583
kylealanhale and starfailure,
I sent and administrative message to experts-exchange and had them "unaccept" the solution. I did not notice at first that starfailure had answered my follow up question.  I thought it was from kylealanhale. When I accepted the solution, this resulted in starfailure not getting any credit for his work.  I have now accepted both solutions  allocating 70 pts to kylealanhale and 30 to starfailure.  I hope both of you feel the point allocation is equitable.

kylealanhale, when I accepted the solution, I certainly did not mean to not give you any credit for your work.  I apologize to you for my error.  

Thanks again for both of your input!
Cheers.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question