I'm doing this to set a border around input fields:
input[type=text], input[type=password], textarea { border: 1px solid #9BAF31;}
I have client-side validation that adds this class when errors occur:
.input-validation-error {
border: 1px solid #ff0000;
background-color: #ffeeee;
}
But only the background is set. The border is still the original color. How can i set it with the validation color?
Have you tried
input[type=text].input-validation-error ,input[type=password].input-validation-error, textarea.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
You need to make the rule you want to apply at least as specific as the existing rules.
You could try to add the .input-validation-error above the "input[type=text],input[type=password], textarea". Also, what does FireBug says when you inspect the element?
Related
Greetings I have problem. How get rid of border-bottom on calendar view(see image 1)?
This appears if using this css.
.fc-scrollgrid-section-body > td {
border-bottom: 1px solid gray;
}
What happens if you change border-bottom to border and sets to 0px then? Well calendar loses completely its bottom row(see image 2) It also did not showing in dayView and monthView.
I tried add another custom styles to css(before that setting .fc-scrollgrid-section-body > td its border to 0px )
1)I know what (investigated in inspector) what days have fc-day style(see image 3)
I added this styles to CSS but it also not working it completely not showing red border
.fc .fc-timegrid-col{
.fc-day{
border-bottom: 1px solid red;
}
}
//and
.fc-day{
border-bottom: 1px solid red;
}
another try
.fc .fc-timegrid-cols{
.fc-day,
.fc-timegrid-col{
border-bottom: 1px solid red;
}
}
using role tag to achieve same result
[role=gridcell] {
.fc-timegrid-col
.fc-day {
border-bottom: 1px solid red;
}
}
What I want is to have day columns bottom line and grid axe do not have one.
I found solution for dayGrid and WeekGrid not for month yet.
.fc-day .fc-timegrid-col-frame {
border-bottom: 1px solid $pitch-black-100;
}
UPDATE after 3+ hours of investigating
to add line for gridView month need to add this thing to styles
.fc-daygrid-body {
border-bottom: 1px solid $pitch-black-100;
}
I have a button in my form, and would like to change its default border.
I can't remove the default and add mine, I have both or none
button.boton{
cursor: pointer;
position: relative;
background:red;
border:none; /*delete the default one*/
border: 1px solid blue; /*add my own border */
}
how can I do this?
Use class identifier to let the style be applied on your button:
CSS Code:
button.boton{
cursor: pointer;
position: relative;
border: 1px solid blue; /*add my own border */
}
HTML Code:
<button class="boton"> Button </button>
Also try this jsfiddle link
EDIT:
Here is a screenshot of the output file in internet explorer version 11
For IE9 :
If you specify 3 of the borders, those borders will render in IE9. Once you specify the 4th border, IE9 refuses to render any of the borders
button.boton{
cursor: pointer;
position: relative;
border-top: 1px solid blue;
border-right: 1px solid blue;
border-bottom: 1px solid blue;
}
Try adding this to the CSS:
-webkit-appearance:none;
And make sure nothing else is adding a border around your button.
You do not need to set the border twice. When you set the border it will remove all properties that were previously set.
I have a contact form. This form uses css .error to mark the invalid fields. I have the following code setup to style the input type text:
input[type=text] {
border:1px solid #000;
}
but when a user doesn't fill out the form correctly, it will add .error to the form:
.error {
border:1px solid red;
}
The problem: .error doesn't overwrite the input[type=text]. The borders will stay black but in the source code, the .error does get added but gets ignored.
How can I fix this problem?
You can increase the specificity of the selector by using:
input[type=text].error {
border:1px solid red;
}
I have this style:
input[type=text], textarea {
width: 98%;
border: 1px #999 solid;
}
It applies the width to all the input that are text but how can I exclude the ones that have the attribute size? I tried input[type=text],input[size!=2], textarea but it doesnt work.
Thanks!!
If you ask for a CSS3 solution you may use :not pseudoclass
input[type=text]:not([size]), textarea {
width: 98%;
border: 1px #999 solid;
}
Codepen Example: http://codepen.io/anon/pen/KFped/
if you want instead to support older browsers (like IE8) just apply a style for
input[type=text], textarea {
width: 98%;
border: 1px #999 solid;
}
and thus revert the style for
input[type=text][size] {
/* revert properties */
}
Essentially i have a pricing table with the class of .priceblock, and i have a border-bottom on my <li> tags, i simply want it to change color when i hover on the priceblock. The code to me seems correct but nothing changes.
Heres the initial li tag:
ul.pricingtable .priceblock .contents li {
font-family: 'OpenSans';
font-size: 13px;
width: 81.904762%;
height: 35px;
margin:0 auto;
padding: 10px 0;
border-bottom: 1px solid rgba(221,221,221,1);
}
And here hover state css code, this hover class works for he coloring of texts, but i can't change the border color.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
Any ideas?
I think you might need to change the hover state from.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
To:
.contents li:hover {
border-bottom: 1px solid rgba(255,117,109,1);
}
HTML may be able to read it better.
The css attributes need to be equals.
for example:
If in the first style block you write "ul.pricingtable" then you need to do that in the second block two.
And in the content of block, they need to be same.
for example:
border-bottom: 1px solid rgba(221,221,221,1);
and
border-bottom: 1px solid rgba(255,117,109,1);
You cann'ot use once with "border-bottom" and then with "border-color" only...