Solved

Add Color to text box border

Posted on 2007-11-16
7
1,580 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
Technology Partners: 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

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.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CSS Style Effect 2 23
TypeError jquery issues with site - CSS conflicts 3 47
Search Box CSS Question 16 50
CSS (jquiry mobile) question 3 34
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
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 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 tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

752 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