• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1584
  • Last Modified:

Add Color to text box border

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
IT79637
Asked:
IT79637
  • 3
  • 2
2 Solutions
 
IT79637Author Commented:
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
 
kylealanhaleCommented:

<!-- 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
 
IT79637Author Commented:
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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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.

 
starfailureCommented:
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
 
kylealanhaleCommented:
Yes, starfailure's addition should fix the problem.  Thanks for catching that.
0
 
IT79637Author Commented:
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

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now