css two colors on input fields

[Joveice]

How can you have 2 colors on the input field? etc some class and it got a green border, some other class and it got a red border. how can this be done? Right now I'm stuck at 1 color for the border. 

[Mr_KoKa]

Can you make a paint sketch?  I'm kind of serious, do you want two borders, one borders around input and another around the input's border or some other combination?

You could wrap your input with another element and set another border to the element wrapping, or if your border is solid then set box-shadow 0 0 0 1px #000 would be probably 1px black border. It might be that first border will cover one pixel of shadow, so your shadow would need to be 2px etc. you get the idea.

[Joveice]

1 hour ago, Mr_KoKa said:

Can you make a paint sketch?  I'm kind of serious, do you want two borders, one borders around input and another around the input's border or some other combination?

You could wrap your input with another element and set another border to the element wrapping, or if your border is solid then set box-shadow 0 0 0 1px #000 would be probably 1px black border. It might be that first border will cover one pixel of shadow, so your shadow would need to be 2px etc. you get the idea.

Okey so the top one is when it's not clicked the one under is when it's clicked. the one under has a diffrent .css file attached to it (not the same page just put there with paint)

I want to be able to have diffrent colors from the same css on the same page etc if you click bla bla its green, but bla bla bla is red and so on

 

[Mr_KoKa]

You probably need to use class. Take a look at this example: https://jsfiddle.net/424cse75/

 

You can see that border of input that has no class is grey (it is color specified for all inputs), then I added input-red class and input got red color border.

Next input has two classes, input-red and input-green, but border is red because input-red is defined after input-green so it overwrites it.

Then there is a green border input that has only input-green class to show that it works.

And last one has three classes, input-red input-green and input-blue, the border is not red because although input-blue is declared before all other classes, the color attribute has !important keyword, that prevents from being overwritten, but if input-green would have !important keyword after border-color then it would overwrite blue.

Using !important is not advised as it may make you unable to change things easy way.

 

So the rules order matters, and so does external css impots, so when you use many css files:

<link rel="stylesheet" type="text/css" href="/css/one.css"/>
<link rel="stylesheet" type="text/css" href="/css/another.css"/>

all rules from another.css file that match names with one.css file rules will overwrite them.

[Joveice]

1 minute ago, Mr_KoKa said:

You probably need to use class. Take a look at this example: https://jsfiddle.net/424cse75/

 

You can see that border of input that has no class is grey (it is color specified for all inputs), then I added input-red class and input got red color border.

Next input has two classes, input-red and input-green, but border is red because input-red is defined after input-green so it overwrites it.

Then there is a green border input that has only input-green class to show that it works.

And last one has three classes, input-red input-green and input-blue, the border is not red because although input-blue is declared before all other classes, the color attribute has !important keyword, that prevents from being overwritten, but if input-green would have !important keyword after border-color then it would overwrite blue.

Using !important is not advised as it may make you unable to change things easy way.

 

So the rules order matters, and so does external css impots, so when you use many css files:

<link rel="stylesheet" type="text/css" href="/css/one.css"/>
<link rel="stylesheet" type="text/css" href="/css/another.css"/>

all rules from another.css file that match names with one.css file rules will overwrite them.

Thank you! (Again) this is exactly what I wanted

[Joveice]

12 minutes ago, Mr_KoKa said:

You probably need to use class. Take a look at this example: https://jsfiddle.net/424cse75/

 

You can see that border of input that has no class is grey (it is color specified for all inputs), then I added input-red class and input got red color border.

Next input has two classes, input-red and input-green, but border is red because input-red is defined after input-green so it overwrites it.

Then there is a green border input that has only input-green class to show that it works.

And last one has three classes, input-red input-green and input-blue, the border is not red because although input-blue is declared before all other classes, the color attribute has !important keyword, that prevents from being overwritten, but if input-green would have !important keyword after border-color then it would overwrite blue.

Using !important is not advised as it may make you unable to change things easy way.

 

So the rules order matters, and so does external css impots, so when you use many css files:

<link rel="stylesheet" type="text/css" href="/css/one.css"/>
<link rel="stylesheet" type="text/css" href="/css/another.css"/>

all rules from another.css file that match names with one.css file rules will overwrite them.

Uh well yea this is what I want tho it doesent work for me.

Bottom is the input part of my css. I tryed adding 

.input-red {
	border-color: #B00000!important;
	box-shadow: 0 0 0 2px #B00000!important;
	border: solid 1px #B00000!important;
}

at the bottom of it and then doing 

<input class="input-red" type="text" name="uid" placeholder="Username"> but that still just displays the old color. what do I need to do to fix that?

	input[type="text"],
	input[type="password"],
	input[type="email"],
	select,
	textarea {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background: #f8f8f8;
		border-radius: 6px;
		border: solid 1px #e5e5e5;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		width: 100%;
	}

		input[type="text"]:invalid,
		input[type="password"]:invalid,
		input[type="email"]:invalid,
		select:invalid,
		textarea:invalid {
			box-shadow: none;
		}

		input[type="text"]:focus,
		input[type="password"]:focus,
		input[type="email"]:focus,
		select:focus,
		textarea:focus {
			border-color: #0D8D6D;
			box-shadow: 0 0 0 2px #0D8D6D;
		}

 

[Joveice]

Omg, sorry it worked. Next time I'm gonna check if the ftp managed to upload the css file or not ...

[Mr_KoKa]

Yeah, but as I said, using !important is not advised, and if you need to use it you probably do something wrong, and using it in every single attribute is just wrong.

 

In your case you should first to applay most of styles just to input, select, textarea and then apply specific styles by [type=] sot hen when you change common thing for all inputs, select and textarea you don't need to use !import or [type=]

 

It doesn't work now without !important because input[type=text] is more specific than class and class doesn't overwrite it but would overwrite

input[type=text].input-red {
  border-color: #F00;
}

But as I said, now you would need to specify it for every single one. also I'm not sure why you use none appearance.

 

Look at this https://jsfiddle.net/09xsdquj/ I applied all styles to all inputs so my .input-red will work and overwrite it no problem, but I had to reset appearance for checkbox and radio inputs, but if you would just apply a class to every input you want to change appearance this would be cleaner: https://jsfiddle.net/09xsdquj/1/

Those inputs I don't want to look like input (checkbox and radio) I just don't apply input class, so I don't need to reset style for them.