Conditionally override the css of the Child element - javascript

I have a parent element which contains childelelement textfields, the textfields has default applied css class which has below style border-bottom: 1px solid #e5e5e5
on the parent element form I added a attribute to disable lines, when the attribute is true I just wanted to override this above css with style border-bottom: 0px solid #e5e5e5
how can I achieve that?
Tried creating a new css file and using !important attribute but this will override everything this I don't want.

Like that ?
.parent .child{
border-bottom: 1px solid #e5e5e5
}
.parent[attr="value"] .child{
border-bottom: 0px solid #e5e5e5
}
Look more info about selection with attributes here https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Related

I want to add a border to the same styled element with a seperate css class

I want to be able to add a border with javascript. So I thought I could do it with adding it as a seperate class . But it does not work .
#button1 {
box-shadow:inset 0px 0px 0px 0px #3dc21b;
background-color:#44c767;
border-radius: 50%;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:180px 180px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
margin:200px;
border: 30px solid black ;
}
.AddedbuttonBorder {
border: 30px solid black ;
}
You are using an ID and a class as CSS selectors. The ID selector has a higher CSS specifity than the class selector, so the border setting in the ID selector will have priority over the one in the class selector, regardless of their order.
To "overrule" the setting of the ID selector, you can either add !important to the setting in the rule that uses the class selector (border: 30px solid black !important;), or use a selector that combines ID and class, like this:
#button1.AddedbuttonBorder {
border: 30px solid black;
}
if you want to do this with javascript you can use
document.getElementById('button1').classList.add('AddedbuttonBorder');

Remove unwanted hover effect [duplicate]

This question already has answers here:
CSS hover border makes elements adjust slightly
(14 answers)
Closed 7 years ago.
I currently have an hover effect written in CSS:
h2:hover{
background-color: #FFE4B5;
border-bottom: 1px solid #888;
border-top: 1px solid #888;
cursor: pointer;
}
But i noticed that when i hover each of the menu options, the text would move slightly up and then down. I didn't add anything that would cause this? I don't think.. How can i fix this and make them stay in place when hovering?
JSfiddle here
It's the border that's being added and removed that's causing this issue.
Two options: add box-sizing: border-box to the item or add transparent borders to the non-hovered elements.
Example box-sizing:
h2 {
box-sizing: border-box;
}
Example border:
h2 {
border-top: transparent 1px solid;
border-bottom: transparent 1px solid;
}
The movement comes from the border being added and removed on hover. An easy fix is to give the h2 element a transparent border of the same width when it's not being hovered:
h2{
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}

If .div.fixed:active then add border to main div (how to?)

LoL, the title has even confused me a little xD Apologies.
I have a fixed element div where once you scroll over it, it follows, simple no problem there.
Now, I'd like to add a simple border to the .div once the div.class is activated by javascript.
Here is an example : http://jsfiddle.net/2ds2y/
once .main.fixed is activated I'd like to add border-bottom: 2px solid #ddd; to the .main div.
I've been reading around but I haven't been able to make this work, I tried the following.
.main.fixed:active ~ .main {
border-bottom: 2px solid #ddd;
}
Just add a border rule to your CSS fixed class:
.main.fixed {
position:fixed;
top:0;
border-bottom: 2px solid red;
}
jsFiddle example
When the class is applied and the div is fixed, the border will be added.
Ya friend simply add this line to the bottom of the CSS which is applied on .main.fixed
border-bottom: 2px solid #ddd;
like this
.main.fixed {
position:fixed;
top:0;
border-bottom: 2px solid #ddd;
}

input:focus only working once

Fiddle
I want my textbox to have a #96f226 border at input:focus, and it works. But if you click away and click back in, it doesn't have that green border anymore.
CSS:
#input {
background: #4a4a4a;
border: 1px solid #454545;
color: #96f226;
}
#input:hover {
background: #656565;
}
#input:focus {
outline: none;
border: 1px solid #96f226
}
HTML:
<input type='text' id='input'>
Edit:
It only doesn't do it if you click in, start typing, click out, and then click in.
The reason this is happening is because your jQuery is adding an inline-style to the input in line 9:
$('#input').css('border', '1px solid #454545');
Inline-styles override styles defined within the stylesheet.
A quick fix would be to add !important to your CSS:
#input:focus {
outline: none;
border: 1px solid #96f226 !important;
}
That works, but it's more of a hack.
If I understand correctly, you're adding the inline-style to remove the red border after an error. A better way to do this would be to simply remove the inline-style. That would sort out the conflict and you wouldn't need to add the !important hack. Replace line 9 in your jQuery with the following:
$('#input').css('border', '');

jquery problem with addClass() & toggleClass() & default CSS value

As you can see in following code, background not changes, but border changes.
The problem is with default background value.
How to solve this problem?!
jquery:
$(document).ready(function() {
$('input').bind('focus blur', function() {
$(this).toggleClass('focus');
});
});
CSS:
input{background-color: blue;}
focus{background-color: red; border: 1px solid blue}
HTML:
<input>
The background defined on input is applied to the tag because of its priority. focus is a class, while input is a tag.
Try setting :
input{
background-color: blue;
}
.focus{
background-color: red; !important
border: 1px solid blue;
}
try write:
background-color: red !important;
instead:
background-color: red;
Also you can write this without jquery. Why you don't write following:
input{background-color: blue;}
input:focus{background-color: red; border: 1px solid blue}
The css is incorrect. dot is missing for focus.
input{background-color: blue;}
.focus{background-color: red !important; border: 1px solid blue;}

Categories

Resources