Solved

Add Color to text box border

Posted on 2007-11-16
7
1,579 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

749 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