#hamburger-btn :focus :active{
outline: 0 !important;
border: 0 !important;
}
<button id="test">
<div id="hamburger-btn">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</button>
I am trying to remove the blue outline from the hamburger btn when clicked however it is not working. My html is the following:
however it is not working
A space is a descendant combinator, you aren't trying targetting the descendants of the button, you are targetting the button itself.
Remove the descendent combinators from your selector.
Also note that to add an OR condition you will need to use a , and repeat every part of selector that is shared between the two parts.
Also note that the focus is applied to the button and not to the div inside the button, so you need to target the correct element in the first place.
Danger: Focus indicators are important accessibility features. Not everybody can or wants to use a mouse. They may need to know where the focus is in a document in order to interact with it. Reconsider removing all signs of the focus.
Do not do this
#test:focus,
#test:active {
outline: 0;
}
<button id="test">
<div id="hamburger-btn">
Needs content to be visible
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</button>
Related
I was creating a search function on my webpage, where when the button (label) is clicked then the search bar will be appeared. However, it is not working with checkbox. I have another checkbox on the same page which is working and I make sure the for attribute in label is pointing correctly.
I have the following code in my html:
<input type="checkbox" id="search-switch" />
<div>
<label for="search-switch">
<button type="button"><svg><!-- a svg pic here --></svg></button>
</label>
<!-- some other elements -->
</div>
<div class="search-placeholder">
<!-- a search bar -->
</div>
and the this in css:
#search-switch {
display: none;
}
.search-placeholder {
display: none;
}
#search-switch:checked ~ .search-placeholder {
display: block;
}
I also tried to put the <input> after the div that contains the label but still not working.
<div>
<label for="search-switch">
<button type="button"><svg><!-- a svg pic here --></svg></button>
</label>
<!-- some other elements -->
</div>
<input type="checkbox" id="search-switch" />
<div class="search-placeholder">
<!-- a search bar -->
</div>
I'm building a no-js page in case people has javascript disabled in their browser settings, so I want a script-free solution. I know it can be easily done with js, and I don't even need to use checkbox method. Because of the layout I can't move either the place of <label> or the place of the search bar.
So I deselect the display: none; of my input checkbox and I actually solve the problem myself. It appears that with the button inside, the checkbox isn't checked. I now only need to add pointer-events: none; to my css of the corresponding button and it works now.
Here I come another question, which I think it might be self-explanatory: How would my button work again when js isn't disabled? Should I point it to checkbox instead?
I'm trying to create a Navigation field for my website, and I would like my buttons to be underneath each other with a white line in between. I have managed to get this part working by adding two line breaks next to the button, as seen here:
<button id = "next" onclick="next()">
Volgende
</button><br><br>
I'm wondering if it's possible to have them show up like this, but if I hide the button, have the other buttons jump up, so they fill the gap and jump back down when the button becomes visible again.
Thanks in advance!
Don't use line breaks for layout. That's a misuse of their purpose, which is to break text.
Just put your buttons in block-level (or inline-block level) containers, like divs. Obviously you'd hide and show the containers, not the buttons.
.button-container:not(:first-child) {
border-top: 1px solid red;
padding-top: 4px;
margin-top: 4px;
}
<div id="next-btn-container" class="button-container">
<button id="next" onclick="next()">Volgende</button>
</div>
<div id="other-btn-container" class="button-container">
<button id="other" onclick="next()">Volgende</button>
</div>
<div id="another-btn-container" class="button-container">
<button id="another" onclick="next()">Volgende</button>
</div>
<br> is not a good practice for cross-browser perspective, kindly use the standard way by using margin and display:block property of css.
So your html will be like:
<button class="mb-20px d-block" id = "next" onclick="next()">
Volgende
</button>
And add below line in your css
.mb-20px { margin-bottom: 20px; }
.d-block { display: block; }
I have found how to make it work.
Instead of using
document.getElementById("button").style.visibility = 'hidden'
I have now used
document.getElementById("button").style.display = 'none'
This makes the buttons fill the gaps when they're hidden.
I'm used to nth-of-type selecting an element within the element (owning the class) I placed the pseudo-class on. For example; body div:nth-of-type(24), to my knowledge, would select the twenty-fourth div in the body of my page.
However, I've found something odd happening when I try to utilize this.
Here's my HTML:
<div class="page-projects">
<p>Projects</p>
<div>
<a href="http://www.projects.crowes.co/biotechgames">
<button>
<img src="../assets/pro/cro-biotechlogo.png" />
<p>BioTech Games</p>
</button>
</a>
<a href="http://www.projects.crowes.co/moonsquads/preview/">
<button>
<img src="../assets/pro/cro-moonsquadslogo.png" />
<p>Moonsquads</p>
</button>
</a>
</div>
</div>
If I try to target the first button (under the a of http://www.projects.crowes.co/biotechgames), I should use .page-projects div:nth-of-type(1) button:nth-of-type(1) and then enter whatever attributes I like, say border: 1px solid red -- this should change that first <button's border to 1px of solid red, but instead, it changes both that button and the next one (the one with an a under http://www.projects.crowes.co/moonsquads/preview/).
I find then that the second button itself can't be individually targetted. My CSS selector targets all buttons as if they are the first type of button element under the child div of page-projects.
Am I doing this wrong?
I made a JSFiddle to explain it : see it here
.page-projects div:nth-of-type(1) a:nth-of-type(1) button {border: 1px solid red}
You have to put a:nth-of-type to select the first a tag and then you can select the first button of it, which is the only one.
Otherwise, with your condition, it will select all the first <button> that valid the condition, because there is only one div element in your .page-projects class.
I have a drop-up menu and when you hover over the login button the login form popups but when you select the input field and than move the mouse out of the drop-up the drop-up disappears. So how can I keep that drop-up open?
On this jsFiddle can you see what I am trying to explain..
I tried this but that didn't work:
css
.login form input:focus .login{
display:block;
}
I also tried this css
.login > form > input:focus .login{
display:block;
}
html of the login button and the associated drop-up div
<li class="right"><p>Log In</p>
<div class="login">
<form>
<h1>Log In</h1>
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<br>
<div class="submit">Log In</div>
</form>
</div>
</li>
I don't understand why this is not working because when you hove over the login button you also set the display of the pop-up div to block so why does this not work.
First, both your CSS examples mean (you must read them from right to left):
"apply display:block; to any .login element which is in an input:focus child, which has a parent form, which has a parent .login element".
In fact, in CSS you cannot apply something to a parent element (<li>) upon action on a child element (your div.login).
But you could show/hide your .login element with a little bit of javascript. For example you could add a class to your this element after a click on your menu element <li>.
You will surely have to use JS for this. We cannot select parent element via CSS.
Question that will help you understand this:
Is there a CSS parent selector?
One more ref. here:
http://css-tricks.com/parent-selectors-in-css/
Hope you will like jquery for achieving this:
http://api.jquery.com/parent/
Enjoy Coding!!
I am trying to make a button for a message system to show an orange dot if there's a new message. However, i can't quite get it working. Is it possible?
Here's the button
<input type="button" value="Messages •" />
And the button on jsFiddle if anyone feels like trying out :-)
http://jsfiddle.net/ePA47/1/
Use a button element instead.
<button type="button">
Messages <span style="color: orange;">•</span>
</button>
Of course, don't add your stylings inline. I just did for this example's sake.
You could also add a class to the button such as new-messages and then do...
button.new-messages:after {
content: "•";
color: orange;
}
Just keep in mind the latter won't work in older IEs.
Use <button> instead of <input> since it has child elements which you can style.
To add an orange dot to your button, I would recommend using a background-image. This will give you the ability to design the dot however you wish, and not be constrained by font types.
It's also better for accessibility if the orange dot is added as a background image, as this is not content.
<input type="button" value="Messages" class="newmessage" />
.newmessage
{
background-image:url('http://img859.imageshack.us/img859/9611/orangedot.jpg');
background-repeat:no-repeat;
background-position:right center;
padding:5px;
padding-right:25px;
}
See Demo: http://jsfiddle.net/ePA47/3/
As per the question heading, the following will help to add multiple styles in a single style tag
<button type="button" style= "margin-top : 20px; border-radius: 15px"
class="btn btn-primary">View Full Profile
</button>