Solved

Add Color to text box border

Posted on 2007-11-16
7
1,570 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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…
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

758 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now