I have styled all my text fields with a gray border, and for the fields with class="form_field_error", I want the border-color to change to red.
I have tried the following code, but I can't get my class to override the previously defined border? What am I missing?
HTML:
<input type="text" name="title" id="title" class="form_field_error">
CSS:
input[type="text"] {
display: block;
height: 15px;
font-weight: normal;
color: #777;
padding: 3px;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.form_field_error {
border: 1px solid #f00;
}
I created a jsFiddle to illustrate the problem.
The input[type="text"] css takes precedence over the .form_field_error css.
Change it to input.form_field_error and the border will work.
Try this:
.form_field_error {
border: 1px solid #f00 !important;
}
I would recommend using:
input[type="text"].form_field_error {
border: 1px solid red;
}
The "!important" rule should only be used as a last resort - nuclear option - because it will surpass all other attempts to target an element based on precise and relevant specificity, reducing the control you have and creating potential roadblocks for future developers. Therefore the proper way, and the best way to handle it is to start with the same selector as the original one you are trying to override, then simply add the one thing that distinguishes it from the original. This way the specificity will be precisely what you want.
Have you tried specifying which div to apply the red border to like this?
input.form_field_error {
border: 1px solid red;
}
And on a side note - the ID you set as 'title' is that just for that one or are you thinking of reusing that?
Because you could also do ->
#title.form_field_error {
border: 1px solid red;
}
Related
I try to create a handwritten looked underline to input.
With this complex border-radius, Chrome looks great. In Safari, however, these artifacts appear.
I tried to fix it with
-webkit-background-clip: padding-box;
from: https://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed
input {
border: none;
border-bottom: 2px solid;
border-radius: 130px 50px/4px 2px;
}
https://codepen.io/matzR/pen/dybpXgO
Safari: artefacts over the input
Safari seems to have some interesting decisions as far as figuring out the border color goes. Try zooming at this, for instance:
input {
border: 0.001px solid white;
border-bottom: 2px solid red;
border-radius: 130px 50px/4px 2px;
padding: 10px;
width: 300px;
}
I guess the linked workaround doesn't work because the border isn't inside the element?
But this is OK (codepen):
input {
border: 1px solid transparent;
border-bottom: 2px solid red;
border-radius: 130px 50px/4px 2px;
padding: 10px;
width: 300px;
}
<input>
My other considerations were using a SVG element for background and/or using border-image-slice to simulate the behaviour.
Is there a way to use SASS/CSS to set a style for an element that has a common class as well as another. For example, I would like the border to appear for elements that are either:
<div class="plate eggs"></div>
<div class="plate bacon"></div>
but not:
<div class="plate"></div>
The code I have at the moment but I'm sure there's a way to combine the two rules?
.plate {
border: none;
&.eggs {
border: 1px solid red;
}
&.bacon {
border: 1px solid red;
}
}
SCSS:
.plate {
border: none;
&.eggs,&.bacon {
border: 1px solid red;
}
}
SASS:
.plate
border: none
&.eggs,&.bacon
border: 1px solid red
You can validate your styles in sassmeister.
Why not add another class ? But if that's not the case, I'd use :not([class]) . Ormaybe even further, you can consider using div[class^="eggs"]
In my app a frequently used HTML component is styles as:
.box {
min-width: 100px;
padding: 20px 10px;
}
there are a lot of these (100+) and their border is styled without bottom and different by color:
.box:nth-child(1) {
border: 2px solid red;
border-bottom: none;
}
.box:nth-child(2) {
border: 2px solid green;
border-bottom: none;
}
.box:nth-child(3) {
border: 2px solid blue;
border-bottom: none;
}
.box:nth-child(4) {
border: 2px solid yellow;
border-bottom: none;
}
...
There's a page in the app where all these boxes need to be displayed with full border (including the bottom border) - what is needed is to remove the 'boder-bottom:none' definitions. So in this specific page I've tried to override the .box definition:
.box {
border-bottom: initial; /* tried unset as well...*/
}
But this still results with no border. Is there a way to specify a style so all the .box accepts the full border - or I have to redefine all of the bottom borders?
-Dan
Why not define another class for that component and define border-bottom for that class and put it as !important
.another_class{
border-bottom: 1px solid #efefef !important;
}
border-bottom: initial; won't give you a border.
Set the second definition to border-bottom: 1px solid #efefef;
I'm having a problem with an box and its associated css outline style. When the box is focused, it should have a blue outline (working). On form validation, if there is a problem, the .error class is added changing the outline and background color red (not working)
On focus I have a style:
input, select {
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
}
input:focus{
background: #EFF5FF;
color: black;
outline: solid 2px #73A6FF;
}
For the error:
input.error:focus, .error {
outline: 2px solid red;
background: rgb(255,240,240);
}
The problem is that the outline without focus is on the outside of the input box while the outline on focus is on the inside of the box so the element jumps as you click on it (CHROME).
Please see this image:
First is on focus, second is no focus with error, third is error with focus. Notice how the no focus causes the border to expand outside the object.
Is there a good way to fix this?
Try setting outline-offset explicitly. Any valid (see Syntax section) value should do, but for moving outline inside the element a negative one can be applied, for example:
JSFiddle
input {
background: #EFF5FF;
outline: solid 2px #73A6FF;
outline-offset: -2px;
}
input.error {
outline: 2px solid red;
background: rgb(255,240,240);
}
Although you are asking about Chrome, be aware that outline-offset property is not supported in IE.
Change every outline to border and give the basic input selector a transparent border (could be grey too for example) for it not to push the second input around et Voilá :) (Updated JSFiddle)
input{
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
border: solid 2px transparent;
}
input:focus{
background: #EFF5FF;
color: black;
border: solid 2px #73A6FF;
}
input.error:focus{
border: 2px solid red;
background: rgb(255,240,240);
}
.error {
border: 2px solid red;
background: rgb(255,240,240);
}
.myclass {
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
Is it possible to group properties that share a common definition, such as border-top and border-bottom in the example above.
Something like:
.myclass {
border-top , border-bottom: solid 1px gray; /* <-- grouped properties */
background: #F2F2F2;
}
TIA,
You can using LESS or SASS (I believe), but if you don't want to use those, you can instead group selectors that will have the same property:
.myclass,
.myOtherClass,
.myAnotherClass,
#anIdForGoodMeasure
{
border-top: solid 1px gray;
border-bottom: solid 1px gray;
background: #F2F2F2;
}
This will apply the style to all the elements.
Unfortunaly border doesnt have a shorthand version (Like say margin/padding for example), it has to be the same for all, or different.
However what you can do - is say you want to style one side uniquely, is specify all of the box, then underneath it, override it with an individual style. Heres a little fiddle of what I mean.
http://jsfiddle.net/XxWwn/
I think I see what you're trying to do here,
This is the only border shorthand I know, without using SASS/LESS.
.myclass {
border-color: red blue green coral;
border-width: 1px 2px 3px 4px;
border-style: solid;
}
This the same shorthand as margins and padding (TOP, RIGHT, BOTTOM, LEFT)