CSS Border Question

[freebirdnz]

Hi everyone, I am new to this forum and quite new to CSS.

I have a standard green input form field (text) with a class. In the class style I have used a 1px black border. What I am wanting to achieve is have a white border within the black border (no spacing between the two). This is giving the illusion that there is a 1px white space around the green box before you see the black border.

If you view normal (coloured) input fields in XP you will understand what I am trying to achieve but not all my clients will be using XP so I have to get this effect with styles.

I hope someone has a more simple way to acheive this!. Please HELP Thanks!

Freebird

[bnovc]

Wrap your input box in a span, div, etc. and give it a border.

[Sayonara]

Give the field the white border, and surround it with a black-bordered DIV.

[tsguitar2004]

Why not...

{
background: #fff;
border: 1px #000 solid;
padding: 1px;
/* adjust that padding to as wide as you want the white border within the black one*/
}


Does that work on an input field?
-ts

[freebirdnz]

Why not...

{
background: #fff;
border: 1px #000 solid;
padding: 1px;
/* adjust that padding to as wide as you want the white border within the black one*/
}


Does that work on an input field?


-ts

Hi guys,
I forgot to mention that I can't use Div's or Spans!. It all has to be in the actual class of the input field. The above code is not what I am wanting. I want the input field colour to be a solid red or blue etc, then I want a white border AND THEN a Black Border around the white border. This gives the illusion there is a space between the colour inbox and the black border. I have been looking at all possibilities and can't find anything!. Surely there is a way for this simple formatting!....lol. Thanks for your replies though!. I still need help on this!

Freebird

[Sayonara]

Can you not just use ridge or groove as the border style?

[freebirdnz]

Can you not just use ridge or groove as the border style?

Hi there.

Thanks........but unfortunately no I can't.........I need this to be exactly how I have explained the ridge or groove gives a different effect. (as it swaps the colours).

I am using this on a web application which is all pixel perfect etc and it needs to have this exact effect!. Perfectionism I believe it's called!......lol

I still need help!.........lol

Thanks everyone for your replies but keep them coming!

[Sayonara]

Why can you not use div, span or a particular border property?

[mothra]

Surely there is a way for this simple formatting!

I wouldn't call it simple formatting. The css rules have been written to do a specific job, putting 2 borders on an element is a little obscure and not part of that job. What is the reasoning behind not being able to use a containing element?

[Bobo]

For this to appear how you want it to, you will HAVE TO use a containing element. Tell us why you can't and we can fix that.

[freebirdnz]

For this to appear how you want it to, you will HAVE TO use a containing element. Tell us why you can't and we can fix that.

Hi again guys,

All I know is that I can't use div's around the input tag. We are using Uniface together with another programme which is like an editor. (it's all too complicated to explain). There are already div's around these fields but are controlled by the editor. I can't really explain how it works as this is all the backend stuff and I am just the designer!. All I know is that I have been told from the dev team that we can't use div's (for one reason or another).

I basically thought there would be some way to give a 2 pixel border and have two different colours!. Why do they make things so complicated!. It's really a simple effect I am after!.......lol.

If it can't be done, it can't be done...........Doh!.

Thanks for your replies.

Freebirdnz

[Sayonara]

No, the current scheme is simple - you're after something complex that doesn't exist.

You might not be able to put divs around the fields, but if as you say there are already divs around them you could theoretically change their appearance with CSS.

If they have no class or id, you will need to select them by their position in the element hierarchy.

[evilregis]

In your css set the width of the text box so you know it's size, then make a graphic of the background colour with the border you want and use that background inside the text box.

[bazz]

Mmm I don't fully understand the restriction on you bt if you are able to affect the class attributes can you not use:

border : 2px #000 double;

bazz

[Bobo]

Try using <span> instead of <div>.

If that doesn't work, use the suggestion above for the double border style. It'll give you color,transparent,color.

If that doesn't work either, try the previous suggestion for using set width/height and a bg image.

[bazz]

Hi again guys,

All I know is that I can't use div's around the input tag. We are using Uniface together with another programme which is like an editor. (it's all too complicated to explain). There are already div's around these fields but are controlled by the editor. I can't really explain how it works as this is all the backend stuff and I am just the designer!. All I know is that I have been told from the dev team that we can't use div's (for one reason or another).

I basically thought there would be some way to give a 2 pixel border and have two different colours!. Why do they make things so complicated!. It's really a simple effect I am after!.......lol.

If it can't be done, it can't be done...........Doh!.

Thanks for your replies.

Freebirdnz

If you are responsible for the front end ie the design (html & CSS), and they the backend, then I can still see no reason why you aren't allowed to use CSS fully. Neither front end scripts or backend technologies, should conflct with the each other - to my knowledge. The point here is that, if the end result is to be as good as it can be, then the two aspects must be treated separately.

Anyone disagree?

Bazz

[freebirdnz]

In your css set the width of the text box so you know it's size, then make a graphic of the background colour with the border you want and use that background inside the text box.

Hi everyone. Thanks for your replies. As I have stated I can't use Span's or Div's. I think the reason I can't is irrevelant. Also the double boder does not give me what I am wanting as I only want a white border then a another border around that one so won't work. I also can't specifly a width as the width of the field is going to change through the Editor being used.

I thought it would be simple enough but has proved to be a challange. I have thought of using a background image but I don't really want to use this option if I can avoid it.

I do appreciate your help though and thanks so much!. This ISN'T a complicated style but it just so happens there isn't a border that gives double lines and you get to choose the inner and outer colours!. Wouldn't that be simple!. Yes!.......

Freebird