Hi:) I'm trying to run the simplest example of :not(:placeholder-shown) and its not workings.Here is a link to my codepen. https://codepen.io/yael-screenovate/pen/eYJEqRB?editors=1100 what did i do wrong? thanx by advance. Heres the code:
button {
display: none;
}
input:not(:placeholder-shown)+button {
display: block;
}
<div>
<input/>
<button>hi there</button>
</div>
It's because you didn't set any placeholder attribute.
button {
display: none;
}
input:not(:placeholder-shown)+button {
display: block;
}
<input placeholder="placeholder"/>
<button>hi there</button>
It makes more sense not to use the :not but do the whole logic the opposite:
button {
display: block;
}
input:placeholder-shown+button {
display: none;
}
<input placeholder="placeholder" />
<button>hi there</button>
Related
Good Day,
How can I change language in one HTML template only using pure CSS?
I tried this:
body.en :lang(it) {
display: none;
}
body.it :lang(en) {
display: none;
}
<html>
<body class="it">
it
en
<button onclick="document.body.className='en'">english</button>
<button onclick="document.body.className='it'">italiano</button>
<body>
</html>
But onclick is still a javascript if im not wrong?
body.en [lang='it'] {
display: none;
}
body.it [lang='en'] {
display: none;
}
And you can toggle this by add default language class to body tag:
<body class='en'></body>
And add js:
document.querySelector('.lang-switch-button').addEventListener('click', function() {
document.querySelector('body').classList.toggle('en')
document.querySelector('body').classList.toggle('it')
})
The question is about pure css. Of course one could achieve this with javascript. But there are several ways to do it with pure css.
You could use the :target selector in combination with ordinary links (instead of buttons) to choose the language like this:
.main-content {
display: none;
}
.main-content:target {
display: block;
}
italiano
english
<div class="main-content" id="it">
...
</div>
<div class="main-content" id="en">
...
</div>
Another solution is using radio boxes or in combination with the :checked selector:
.main-content {
display: none;
}
#it:checked ~ .main-content[data-lang=it] {
display: block;
}
#en:checked ~ .main-content[data-lang=en] {
display: block;
}
<input type="radio" name="lang" id="it" />
<label for="it">italiano</label>
<input type="radio" name="lang" id="en" />
<label for="en">english</label>
<div class="main-content" data-lang="it">
contenuto italiano
</div>
<div class="main-content" data-lang="en">
english content
</div>
But if your site has large content, you should consider to separate them in individual files.
I am trying to make a collapsible button with pure HTML and CSS. Here is what I have:
#hidden {
display: none;
height: 100px;
background: red;
}
:checked+#hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>
<label for="my_checkbox">Show/hide</label>
This works. However, I want the hidden div to come after the button instead of before. When I move the div to after the checkbox label, it does not work.
How can I fix this ?
Thanks!
You want to use a different CSS selector. The below uses the General sibling combinator to target the div no matter its order with respect to the input element (so long as it follows it).
#hidden {
display: none;
height: 100px;
background: red;
}
:checked ~ #hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<label for="my_checkbox">Show/hide</label>
<div id="hidden"></div>
use negation instead of +, so that it will select all divs related to that class name
#hidden {
display: none;
height: 100px;
background: red;
}
:checked~#hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<label for="my_checkbox">Show/hide</label>
<div id="hidden"></div>
I have a simple html/css toggle set up
#toggle1 {
display: none;
}
#toggle1:target {
display: block;
}
#toggle2 {
display: none;
}
#toggle2:target {
display: block;
}
Show1<br />
Show2
<p id="toggle1">1</p>
<p id="toggle2">2</p>
This works as desired by showing and hiding. However I want the initial paragraph to be visible upon page load. If I remove the #toggle1 {display: none;} it does not work properly.
Any assistance would be most helpful and appreciated.
Thanks in advance.
This is just a bit of a hack, but if you reverse the order of the hidden elements, add display:block to the "default" one and then add display:none to :target ~ #toggle1 it should simulate a default selected item:
#toggle1, #toggle1:target, #toggle2:target {
display: block;
}
:target ~ #toggle1, #toggle2 {
display: none;
}
Show1<br />
Show2
<p id="toggle2">2</p>
<p id="toggle1">1</p>
I want to display a div when an input field is focused(active?)
In the following code, I want to display .text when .input is focused.
I'm trying this:
HTML :
<div class="box">
<input class="input" type="text" value="" />
<div class="text">text</div>
</div>
CSS :
.text { display: none; }
.input:focus .text { display: block; }
Example :
JSFiddle
You need to use the sibling CSS selector:
.input:focus + .text{
display: block;
}
Updated Fiddle
You can also use general sibling selector ~ :
.input:focus ~ .text { display: block; }
JSFiddle
my function is hide and show div with pure css but when i click open, the button still not disappear.
Open
<div id="show">
some text...
Close
</div>
and the css look like:
<style>
#show {display: none; }
#show:target { display: inline-block; }
#hide:target ~ #show { display: none; }
<style>
when i add this :
#show:target ~ #open { display: none; }
the button #open still not hiding
anyone can help me.
thanks before :)
You could solve it by putting your Open link inside the #show div
jsFiddle
HTML
<div id="show">
Open
<div id="content">
some text...
Close
</div>
</div>
CSS
#content {
display: none;
}
#show:target #content {
display: inline-block;
}
#show:target #open {
display: none;
}
The click functionality can be implemented using Checkbox for pure css. I modified your HTML as follows:
HTML
<input id="checkbox" type="checkbox" class="checkbox" />
<label id="open" for="checkbox" class="btn btn-default btn-sm"> <span class="show-text"></span>
</label>
<div id="show">some text...
<label for="checkbox" class="second-label btn btn-default btn-sm">Close</label>
</div>
CSS
:checked ~ .btn-default, #show, .checkbox {
display: none;
}
:checked ~ #show {
display: block;
}
.show-text:after {
content:"Open";
}
:checked + .show-text:after {
content:"";
}
.second-label, .show-text {
text-decoration: underline;
cursor: pointer;
}
Working Fiddle
Mr_Green Thank you for that code. I modified it for a responsive expanding menu on mobile devices
HTML
<input id="menu-toggle" type="checkbox" class="checkbox-toggle" />
<label id="open" for="menu-toggle" class="btn btn-default">Menu</label>
<div id="show">
Some Content
</div>
CSS
#media (max-width: 650px) {
input.checkbox-toggle + label {
display: block;
padding:.7em 0;
width:100%;
background:#bbbbbb;
cursor: pointer;
text-align:center;
color:white;
Text-transform:uppercase;
font-family:helvetica, san serif;
}
input.checkbox-toggle:checked + label {
background:#6a6a6a;
}
#show {
display: none;
}
input.checkbox-toggle:checked ~ #show {
display: block;
}
}
input.checkbox-toggle {
display: none;
}