I'm puzzled. I swear I have used this CSS before and it produced a 1px border without problems.
The CSS is:
#menu-primary-menu-1 {
border: 1px solid #000;
padding: 1em;
}
It is being applied around the top navigation of this page.
However, it is producing a double-border.
I can see no CSS being applied here which is producing this double border. Can you?
Remove this border
.header-center nav{
border: 1px solid #000; /**Remove this border**/
}
Related
I'm learning CSS online and the above code was perfectly working when he used it. But when I did the same, browser markedenter code here it as an invalid property value. Moreover the border-bottom makes the hr entirely gray in color(the above mentioned code in rgba is for gray color) overriding the border-top and the default color of hr
hr
{
width: 400px;
border-top: 1PX solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);}
}
Remove one } from the end , it should works perfectly ;
hr
{
width: 400px;
border-top: 1PX solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
Try formatting you css file every moment to not have this problem again.
I have vuetify 1.5.x on my codepen. As you can see in my codepen, the line on autocomplete is quite thick. I only want that line to be only 1px. I want that select field (outline border) to be border: 1px solid red. I am try inspect element and see that class, then I write code like this:
.theme--light.v-select-list v-card {
border: 1px solid red;
}
this code doesn't work. I try another way using this code:
theme--light.v-select-field--outline > .v-input__control > .v-input__slot {
border: 1px solid red;
}
this code doesn't work too. What should I do?
Override in your global or component style
.v-text-field--outline.v-input--has-state>.v-input__control>.v-input__slot,
.v-text-field--outline.v-input--is-focused>.v-input__control>.v-input__slot,
.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover {
border: 1px solid !important;
}
.theme--light.v-text-field--outline>.v-input__control>.v-input__slot {
border: 1px solid !important;
}
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;
}
I have text inputs with 1px padding that I sometimes put 1 px borders on. I want all text inputs to fill the same vertical space, borders or not. To achieve that, I created a "don't have borders, but fill space like you do" class with border: none and 2px of padding:
.BorderInputNone {
border: none;
padding: 2px;
}
This worked in IE8, but in IE7, there were visible borders around the input.
EDIT: I fixed it by using border: transparent.
.BorderInputNone {
border: 1px solid transparent;
padding: 1px;
}
Use border: 0px; as it seems more cross browser compatible.
Check this question here question here
Here is an example for you to fix IE7:
http://jsfiddle.net/Z7Uee/
I fixed it by using border: transparent.
.BorderInputNone {
border: 1px solid transparent;
padding: 1px;
}
.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)