I am trying to achieve an effect in html and css. I have a button which says "Login". So what I'm trying to do is when I hover:
The login button transforms into two buttons which says:
"Customer Login" and "Admin Login".
Here is a way to make it with some simple css;
.login-actions { position: relative; }
.login-actions a { display: inline-block; padding: 1rem 2rem; text-decoration: none; color: #fff; background: #111; }
.login-actions a:not(:first-child) { opacity: 0; }
.login-actions:hover a:not(:first-child) { opacity: 1; }
.login-actions:hover a:first-child { opacity: 0; position: absolute; left:0; top: 0; z-index: -1; }
<div class="login-actions">
Login
Customer Login
Admin Login
</div>
With jquery we can do the check below example
$(".hide").hide();
$(".hoverHide").mouseover(function(){
$(".hoverHide").hide();
$(".hide").show();
});
$(".hoverHide").mouseleave(function(){
$(".hoverHide").show();
$(".hide").hide();
});
.login {
width:300px;
padding: 10px;
background: #ccc;
}
.login button {display:inline-block;margin: 5px 4px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="login">
<p>Login</p>
<input type="text"/>
<input type="password"/><br>
<button class="hoverHide">Login</button>
<div class="hide"><button>Customer Login</button> <button>Admin Login</button></div>
</div>
Related
I learned checkbox hack on stackoverflow the other day and I successfully applied it to making a dialog to open on click of a text. However, now I want to close the dialog when "X" is clicked. Below is what I have attempted up to now, but to no avail:
https://jsfiddle.net/gmcy12zv/5/
HTML
<div style="height:100px">
</div>
<div class="tooltip">
<input type="checkbox" id="clickhere" />
<label for="clickhere">
<div class="click-msg">click here</div>
</label>
<div class="tooltiptext">
<input type="checkbox" id="closeCheck"/>
<label for="closeCheck">
<div class="close">
X
</div>
</label>
<h1 class="tooltip-title">should open on click</h1>
<p class="tooltip-msg"> close when X is clicked</p>
</div>
</div>
I want "tooltiptext" to disappear when X button for div "close" is clicked.
CSS
#clickhere {
display: none;
}
#clickhere:not(:checked) ~ .tooltiptext {
display:none;
}
#clickhere:checked ~ .tooltiptext {
visibility: visible;
}
#closeCheck {
display: none;
}
/* #closeCheck:not(:checked) ~.tooltiptext {
visibility: visible;
} */
#closeCheck:checked ~.tooltiptext {
display:none;
}
.click-msg{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
.tooltip-title {
font-weight: 700;
font-size: 10px;
line-height: 20px;
}
.tooltip-msg{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
.tooltip .close{
position: absolute;
top: 5px;
right: 5px;
}
.tooltip {
text-align: right;
position: relative;
display: block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
/* .tooltip:hover .tooltiptext {
visibility: visible;
} */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
border-style: solid;
border-width: 5px;
}
.tooltip .tooltiptext {
width: 120px;
bottom: 150%;
left: 80%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
top: 100%;
left: 90%;
margin-left: -5px;
border-color: black transparent transparent transparent;
}
where am I going wrong in my approach ? is this because two checkboxes are almost nexted?
You are working with checkboxes. The checkbox hack in this case is not the best way. The "click here" text is actually a checkbox where you are providing a property checked in CSS ,this can be achived by adding another checkbox at the close button to work exactly as the one you used to open but I will not suggest that. I suggest the best practice is to use JavaScript click events. I have changed your code .I added some javascript and edited some HTML ansd CSS . Youn can check it out ,it works perfectly the way you wanted.
var dialog= document.querySelector(".tooltiptext");
var openBtn = document.querySelector(".price-line");
var closeBtn = document.querySelector(".close");
openBtn.addEventListener("click",()=>{
dialog.style.display ="block";
});
closeBtn.addEventListener("click",()=>{
dialog.style.display ="none";
})
.price-line{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
/*
.price-line:active .tooltiptext {
visibility: visible;
}
.tooltiptext:hover {
visibility: visible;
}
*/
.tooltip-title {
font-weight: 700;
font-size: 10px;
line-height: 20px;
}
.tooltip-msg{
font-weight: 400;
font-size: 10px;
line-height: 20px;
}
.tooltip .close{
position: absolute;
top: 5px;
right: 5px;
}
.tooltip {
text-align: right;
position: relative;
display: block;
}
.tooltip .tooltiptext {
display:none;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
}
/* .tooltip:hover .tooltiptext {
visibility: visible;
} */
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
border-style: solid;
border-width: 5px;
}
.tooltip .tooltiptext {
width: 120px;
bottom: 150%;
left: 80%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
top: 100%;
left: 90%;
margin-left: -5px;
border-color: black transparent transparent transparent;
}
<div style="height:100px">
</div>
<div class="tooltip">
<label for="clickhere">
<div class="price-line">click here</div>
</label>
<div class="tooltiptext">
<label for="closeCheck">
<div class="close">
X
</div>
</label>
<h1 class="tooltip-title">should open on click</h1>
<p class="tooltip-msg"> close when X is clicked</p>
</div>
</div>
Using only CSS.
Place the #closeCheck on top of .tooltip or .tooltiptext:
<input type="checkbox" id="closeCheck" />
<div class="tooltip"><!...->
Next hide #closeCheck and when it's checked hide .tooltiptext
#closeCheck {display:none;}
#closeCheck:checked + .tooltip .tooltiptext {display: none;}
That "+" is an adjacent sibling combinator which singles out the tag
positioned immediately next.
Example A is the fixed OP code
Example B is a different layout with a better strategy.
Example A
#closeCheck {
display: none;
}
#closeCheck:checked+.tooltip .tooltiptext {
display: none;
}
<input type="checkbox" id="closeCheck" />
<div class="tooltip">
<input type="checkbox" id="clickhere" />
<label for="clickhere">
<div class="click-msg">click here</div>
</label>
<div class="tooltiptext">
<label for="closeCheck">
<div class="close">
X
</div>
</label>
<h1 class="tooltip-title">should open on click</h1>
<p class="tooltip-msg"> close when X is clicked</p>
</div>
</div>
Example B
.dialog {
margin-bottom: 8px;
}
legend,
menu {
display: inline-block;
float: right;
}
label {
padding: 3px 5px;
border: 2px inset lightgrey;
border-radius: 4px;
cursor: pointer;
}
#switchA,
#switchB,
.dialog {
display: none
}
#switchA:checked+.open {
display: none
}
#switchA:checked~.dialog.A {
display: block;
}
#switchB:checked+.dialog.B {
display: block;
}
<input id='switchA' type='checkbox'>
<label for='switchA' class='open A'>Open</label>
<fieldset class='dialog A'>
<legend><label for='switchA'>X</label></legend>
<p>Beth, your son is dying! Say good-bye! Yo! What up my glip glops! Crystal poachers. There's no lower form of life. They think the galaxy's their own personal piggy bank. You can run, but you can't hide bitch! </p>
<menu>
<label for='switchA'>Cancel</label>
<label for='switchB'>Next</label>
</menu>
</fieldset>
<input id='switchB' type='checkbox'>
<fieldset class='dialog B'>
<legend><label for='switchB'>X</label></legend>
<p>Where are my testicles, Summer? I'm man enough to simply say, 'I'm going to poop', and I'd be honored to have Ron Howard involved. Dont look at me! That guy over there roped me into this. Dont mind those stare goblins.</p>
<menu>
<label for='switchB'>Cancel</label>
</menu>
</fieldset>
I have a dropDown menu and when the drop list is open is overlapping the div below, I wish to push the div below down when the dropdown is open, I've try with flex, grid, flexgrow, grid rows, positions relative/absolute, and I can't find any solution.
here is the HTML code:
<div class="container">
<div class="dropContainer">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
<div class="inputContainer">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" />
</div>
</div>
and the CSS:
.container{
display: flex;
flex-direction: column;
height: 100vh;
}
.dropContainer{
display: block;
height: 100%;
margin-bottom: 2rem;
}
.inputContainer{
display: block;
height: 100%;
top: 5rem;
}
/* dropDown Menu */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
padding-bottom: 140px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display: block; }
and here is the code example working: https://codepen.io/raulcosalux/pen/VwzGyYO
kind regards,
Using absolute positioning will not regard for content underneath. With that being said, you have to use position: relative; on your dropdown menu in order to allow the input or any other content below to adjust when the menu opens.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.container{
display: flex;
flex-direction: column;
height: 100vh;
}
.dropContainer{
display: block;
height: 100%;
margin-bottom: 2rem;
}
.inputContainer{
display: block;
height: 100%;
position: sticky;
}
/* dropDown Menu */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: relative;
background-color: #f1f1f1;
min-width: 160px;
padding-bottom: 140px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {display: block; }
<div class="container">
<div class="dropContainer">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
<div class="inputContainer">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" />
</div>
</div>
Change the position of the dropdown container that holds the menu to relative, then remove the padding you have on it. Remove this => padding-bottom: 140px; and change this => .dropdown-content { position: absolute; } to .dropdown-content { position: relative; }, this will push the content down below the menu element and the padding will no longer cover its content.
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.container{
display: flex;
flex-direction: column;
height: 100vh;
}
.dropContainer{
display: block;
margin-bottom: 2rem;
}
.inputContainer{
display: block;
height: 100%;
top: 5rem;
}
/* dropDown Menu */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.show {
display: block;
}
<div class="container">
<div class="dropContainer">
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">Dropdown</button>
<div id="myDropdown" class="dropdown-content">
Home
About
Contact
</div>
</div>
</div>
<div class="inputContainer">
<label for="fname">First name: </label>
<input type="text" id="fname" name="fname" />
</div>
</div>
I also removed the height on the dropContainer as well.
I'm trying to create a menu with options inside. I'm using only CSS with checkbox and radio inputs.
By changing one of the options, I also want the menu to close. I tried this using label inside label, but it doesn't work.
My prototype code:
input {
display: none;
}
label {
cursor: pointer;
}
label span:hover {
font-weight: 600;
}
.opener .menu {
background-color: #f3f3f3;
display: flex;
flex-direction: column;
color: #4d4d4d;
padding: 12px 4px;
width: 270px;
}
#menu:checked~.opener .menu {
display: none;
}
#menu~.opener>span:nth-of-type(1) {
display: none;
}
#menu:~.opener>span:nth-of-type(2) {
display: block;
}
#menu:checked~.opener>span:nth-of-type(1) {
display: block;
}
#menu:checked~.opener>span:nth-of-type(2) {
display: none;
}
.box {
height: 50px;
width: 50px;
margin: 20px 0;
}
#red:checked~.box {
background-color: red;
}
#blue:checked~.box {
background-color: blue;
}
#green:checked~.box {
background-color: green;
}
<input id="menu" type="checkbox"></input>
<input id="red" type="radio" name="opcoes" checked></input>
<input id="blue" type="radio" name="opcoes"></input>
<input id="green" type="radio" name="opcoes"></input>
<label class="opener" for="menu"><span>Open</span><span>Close</span>
<div class="menu">
<label for="red"><span>red</span></label>
<label for="blue"><span>blue</span></label>
<label for="green"><span>green</span></label>
</div>
</label>
<div class="box"></div>
Or you can check here: https://codepen.io/anon/pen/JxzPKR
Is there a way to close the menu when you click on one of the options without JavaScript?
Sometimes, contrary to popular opinion, it's just more dev friendly to use Javascript.
There is too much conditional logic for this to be a pure CSS solution. There are ~3 if-then-else conditions you would have to satisfy, while keeping the styles cascading. I think the most arduous task to satisfy is that you have a toggle header, in addition to other controls toggling it.
This will inherently get more complex and convoluted the more components you add. But here is an example using :target. This is a work-around and provides a solution to the question at hand. You won't be able to 'toggle' the menu this way so I had to add the header under the elements so it can be accessed via some kind of sibling selector:
.menu {
position: relative;
width: 45%;
}
input[type="radio"] {
position: absolute;
opacity: 0;
height: 0;
width: 0;
}
a:any-link {
all: unset;
}
.menu-header {
position: absolute;
top: 0;
padding: 5px 10px;
color: white;
width: 100%;
background-color: cornflowerblue;
}
.menu-header a {
font-weight: bold;
cursor: pointer;
color: white;
font-size: 22px;
}
.menu-header .close {
display: none;
}
#menu-body {
display: none;
flex-flow: column nowrap;
position: absolute;
top: 34px;
background-color: rgba(220,220,220,1);
height: 100px;
color: black;
width: 100%;
padding: 10px;
}
.menu-header a,
#menu-body label {
cursor: pointer;
}
#menu-body:not(:target) {
display: none;
}
#menu-body:not(:target) + .menu-header > a:not(.close) {
display: inline-block;
}
#menu-body:target {
display: flex;
}
#menu-body:target + .menu-header > a {
display: none;
}
#menu-body:target + .menu-header > a.close {
display: inline-block;
}
<div class="menu">
<div id="menu-body">
<input id="red" type="radio" name="opcoes" checked/>
<label for="red">Red</label>
<input id="blue" type="radio" name="opcoes"/>
<label for="blue">Blue</label>
<input id="green" type="radio" name="opcoes"/>
<label for="green">Green</label>
</div>
<div class="menu-header">≡ Open≡ Close</div>
</div>
You should consider accessability using this method, or at minimum, how this effects site navigation.
Edit: A demo in regards to discussion in comments:
.menu {
position: relative;
width: 45%;
}
input[type="radio"] {
position: absolute;
opacity: 0;
height: 0;
width: 0;
}
a:any-link {
all: unset;
}
#menu-header {
position: absolute;
top: 0;
padding: 5px 10px;
color: white;
width: 100%;
background-color: cornflowerblue;
}
#menu-header a {
font-weight: bold;
cursor: pointer;
color: white;
font-size: 22px;
}
#menu-header .close {
display: none;
}
#menu-body {
display: none;
flex-flow: column nowrap;
position: absolute;
top: 34px;
background-color: rgba(220,220,220,1);
height: 100px;
color: black;
width: 100%;
padding: 10px;
}
.menu-header a,
#menu-body label {
cursor: pointer;
}
#menu-body:not(:target) {
display: none;
}
#menu-body:not(:target) ~ .menu-header > a:not(.close) {
display: inline-block;
}
#menu-body:target {
display: flex;
}
#menu-body:target ~ #menu-header > a {
display: none;
}
#menu-body:target ~ #menu-header > a.close {
display: inline-block;
}
#red:target ~ .box {
background-color: red;
}
#blue:target ~ .box {
background-color: blue;
}
#green:target ~ .box {
background-color: green;
}
.box {
background-color: black;
width: 75px; height : 75px;
}
<div class="menu">
<input id="red" type="radio" name="opcoes" checked/>
<input id="blue" type="radio" name="opcoes"/>
<input id="green" type="radio" name="opcoes"/>
<div id="menu-body">
Red
Blue
Green
</div>
<div class="box"></div>
<div id="menu-header">
≡ Open
≡ Close
</div>
</div>
Is it possible to have 2 different font sizes in one input placeholder in CSS?
something like this design:
In regular html you can make it with span,:before,&:after and etc.
but in input you cant make all this things so i want to understand if its possible...
thanks
To apply different styles in the same placeholder is not possible.
What you can do however is either use pseudo elements or a div which behaves as a placeholder and hide/show it when the input is focussed.
This might help:
$("#input").keyup(function() {
if ($(this).val().length) {
$(this).next('.placeholder').hide();
} else {
$(this).next('.placeholder').show();
}
});
$(".placeholder").click(function() {
$(this).prev().focus();
});
.placeholder {
position: absolute;
margin: 7px 8px;
color: #A3A3A3;
cursor: auto;
font-size: 14px;
top: 7px;
}
.small {
font-size: 10px;
}
input {
padding: 5px;
font-size: 11pt;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="input" type="text" />
<div class="placeholder">Email <span class="small">address</span>
</div>
CSS only Solution
.input-field {
position: relative;
display: inline-block;
}
.input-field > label {
position: absolute;
left: 0.5em;
top: 50%;
margin-top: -0.5em;
opacity: 1;
display: none;
}
.input-field > input[type=text]:placeholder-shown + label {
display: block;
}
.input-field > label > span {
letter-spacing: -2px;
}
.first-letter {
color: red;
font-size:100%;
}
.second-letter {
color: blue;
font-size:50%;
}
.third-letter {
color: orange;
font-size:75%;
}
.fourth-letter {
color: green;
font-size:100%;
}
.fifth-letter {
color: yellow;
font-size:25%;
}
<div class="input-field">
<input id="input-text-field" type="text" placeholder=" "></input>
<label for="input-text-field">
<span class="first-letter">H</span>
<span class="second-letter">E</span>
<span class="third-letter">L</span>
<span class="fourth-letter">L</span>
<span class="fifth-letter">O</span>
</label>
</div>
JS solution
addListenerMulti(document.getElementById('input-text-field'), 'focus keyup', blurme);
function blurme(e) {
var element = e.currentTarget;
element.classList[(element.value.length !== 0) ? "add" : "remove"]('hide-placeholder');
}
function addListenerMulti(el, s, fn) {
s.split(" ").forEach(function(e) {
return el.addEventListener(e, fn, false)
});
}
.input-field {
position: relative;
display: inline-block;
}
.input-field > label {
position: absolute;
left: 0.5em;
top: 50%;
margin-top: -0.5em;
}
.hide-placeholder + label {
display: none;
}
.input-field > label > span {
letter-spacing: -2px;
}
.first-letter {
color: red;
font-size:100%;
}
.second-letter {
color: blue;
font-size:100%;
}
.third-letter {
color: orange;
font-size:100%;
}
.fourth-letter {
color: green;
font-size:50%;
}
.fifth-letter {
color: black;
font-size:50%;
}
<div class="input-field">
<input id="input-text-field" type="text">
<label for="input-text-field">
<span class="first-letter">H</span>
<span class="second-letter">E</span>
<span class="third-letter">L</span>
<span class="fourth-letter">L</span>
<span class="fifth-letter">O</span>
</label>
</div>
Is there a way to hide a div with css only when you click a link. I'm making a popup that needs to be able to close when there is no JS. I've tried various methods but they have not worked when the button is inside the div that needs to hide.
when the button is inside the div that needs to hide.
Short answer: No, you can't achieve this when the button is inside the element. Thanks Joseph Marikle
However, you can achieve this when the button is outside the div.
#hide {
display: none;
}
label {
cursor: pointer;
text-decoration: underline;
}
#hide:checked ~ #randomDiv {
display: none;
}
<input type="checkbox" id="hide" />
<div id="randomDiv">
This is a div
<label for="hide">Hide div</label>
</div>
The following example hides the div when the checkbox is checked.
It uses the #closebutton ~ #targetdiv {... selector wich only works with its elements on this order. So the checkbox is placed inside of the main div on the layout but before of it on the code.
.main {
border-radius: 5px;
padding: 30px;
margin-bottom: 5px;
}
#A {
background: gold;
}
#B {
background: skyblue;
}
#C {
background: yellowgreen;
}
.close {
float: right;
margin-top: 30px;
margin-right: 75px;
height: 20px;
width: 20px;
}
.close:checked {
display: none;
}
.close:checked ~ #A, .close:checked ~ #B, .close:checked ~ #C {
display: none;
}
body {
overflow-y: scroll;
}
<div id=groupA><input class="close" type="checkbox">
<div id=A class=main>info A</div></div>
<div id=groupB><input class="close" type="checkbox">
<div id=B class=main>info B</div></div>
<div id=groupC><input class="close" type="checkbox">
<div id=C class=main>info C</div></div>
<html>
<head>
<style>
#hide{
z-index: 10000;
position: relative;
top: -54px;
padding: ;
width: 9%;
opacity: 0;
height: 22px;
}
#hide:checked~h2{
display: block;
}
h2{
display: none;
}
</style>
<title></title>
</head>
<body>
<h1>Click me</h1>
<input type="checkbox" id="hide" />
<h2>I'll appear when you click h1 !!!</h2>
</body>
</html>