I want to know if it is possible to change the text of a <p> using the CSS onclick event. I know it is possible using Javascript. I just want to know if there is a way to do it in CSS.
You may emulate simular behaviour with using checkboxes and sibling selectors.
Just try SO snippet:
[type="checkbox"] {
position: relative;
top: -9999px;
}
label > p {
margin: 0;
border: 1px solid #eee;
padding: 20px;
text-align: center;
font-family: Arial, sans-serif;
font-size: 20px;
}
label > p:last-child {
display: none;
}
[type="checkbox"]:checked ~ p {
display: block;
}
[type="checkbox"]:checked + p {
display: none;
}
<label>
<input type="checkbox">
<p>Click to format disk C:/</p>
<p>Disk C:/ was succesfully formatted :) Oh no, click to restore!!!</p>
</label>
More links about used selectors:
Adjacent sibling selectors
General sibling selectors
Related
Using only CSS, I'm trying to set a list of links to have a exclamation mark next to them if they are 'unvisited' links, and a check box next to them if they have been visited. The former works fine, but when the links have been visited, the tick box doesn't appear. My CSS is as follows:
.journey-table td a:link:before {
content: "\f071";
font-family: FontAwesome;
padding-right: 5px;
}
.journey-table td a:visited:before {
content: "\f14a";
font-family: FontAwesome;
padding-right: 5px;
}
Any help would be greatly appreciated.
According to this page, the styling of a :visited element, has been made very limited, for privacy reasons. Because of this, any child elements or pseudo elements of a visited link will be styled like an unvisited link.
I've created an example for you to understand
a:before {
background-color: blue;
content: "";
display: block;
height: 25px;
width: 25px;
float: left;
margin-right: 10px;
}
a:hover:before {
background-color: red;
}
this is a link
I use some CSS to redesign my checkboxes in ASP.NET:
input[type=checkbox] {
display: none !important;
cursor: pointer;
}
input[type=checkbox]:not([disabled]) + label {
cursor: pointer;
}
input[type=checkbox] + label:before {
position: relative!important;
padding-right: 3px;
top: 1px;
font-family: 'Arial' !important;
font-style: normal;
font-weight: normal;
content: "O";
color: #333;
}
input[type=checkbox]:checked + label:before {
content: "X";
color: #ffa500;
}
<input type="checkbox" id="myCheckbox"><label for="myCheckbox">Click</label>
This works as long as I set the Text property of my ASP checkbox to something that is neither null nor String.Empty. When I don't set it or set it to an empty string, the produced HTML will not contain the followed label tag, thus my CSS will not work.
Is there a way to design the checkbox without a following label tag?
JSBIN Example (Preview)
To get your CSS to work, it would be much easier to modify the CSS than trying to get ASP to play nice. Here's a working version based off the inputs instead of the wonky labels.
input[type=checkbox] {
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0
}
input[type=checkbox]:after {
padding-right: 3px;
top: 1px;
font-family: 'Arial' !important;
font-style: normal;
font-weight: normal;
font-size: 18px;
content: "O";
color: #333;
display:block;
}
input[type=checkbox]:checked:after {
content: "X";
color: #ffa500;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input id="cb1" type="checkbox" name="x$cb1" checked="checked"></input><label for="cb1"></label>
<br />
<input id="cb1" type="checkbox" name="x$cb2" checked="checked"><!-- not visible -->
</body>
</html>
So, I wasn't able to get it working with just an checkbox input because you can't apply pseudo elements to inputs. But this solution doesn't rely on any JS and would give you complete stylistic control over what the checkbox should look like, even allowing you to set a disabled state on the input should you need it:
input[type="checkbox"] {
display: none;
}
label i:before {
position: relative;
padding-right: 3px;
top: 1px;
font-family: 'Arial';
font-style: normal;
font-weight: normal;
content: "O";
color: #333;
}
label input:checked + i:before {
content: "X";
color: #ffa500;
}
label input[disabled] + i:before {
opacity: .25;
}
<label>
<input type="checkbox">
<i></i>
</label>
The label doesn't require a for attribute since it's wrapping the input, and will act as the click handler for you. I needed the <i> element, because there's no way for me to tell if a child <input> is :checked.
Hopefully this helps, not sure if it'll work if the <i> element is empty, but you could always add a inside and set the font-size to 0.
Don't use checkbox
just try
//HTML
<span class="my-custom-checkbox">
<i class="fa fa-check" style="visibility:hidden"></i>
</span>
//CSS
.my-custom-checkbox{
border:1px solid #555;
border-radias:4px;
height:8px;
width:8px;
}
.my-custom-checkbox>i{
color:#555;
}
// jQuery code
$(".my-custom-checkbox").click(function(event){
var selector=$(this).find("i.fa");
if(selector.css("visibility")=="hidden"){
selector.css("visibility","visible");
}
else{
selector.css("visibility","hidden");
}
});
This type of straightgy will give you freedom to implement your need with low cost of effort.
I don't think there is way to design the checkbox without an external tag. Because you can't semantically apply :after or :before pseudo elements on non container elements, the exception to this rule is chrome browser where we can apply :after and :before to non container elements. If you want to run your web application in chrome browser please follow the below code.
input[type=checkbox] {
visibility: hidden;
cursor: pointer;
}
input[type=checkbox]:before {
position: relative !important;
padding-right: 3px;
top: 1px;
font-family: 'Arial' !important;
font-style: normal;
font-weight: normal;
content: "O";
color: #333;
visibility: visible;
}
input[type=checkbox]:checked:before {
content: "X";
color: #ffa500;
}
<input id="cb1" type="checkbox" name="x$cb1" checked="checked"></input>
<label for="cb1"></label>
<br />
<input id="cb1" type="checkbox" name="x$cb2" checked="checked"><!-- not visible -->
Please have a look at the snippet the way the code works is by using visibility: hidden on the parent and then visibility: visible on the child :before pseudo element. Note: this will not work on firefox browser.
Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:
I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using :after and background colors on the h1, but it wouldn't look right against a gradient background.
I'd like to do this with CSS, not JavaScript. If it doesn't work in older browsers, that's fine.
UPDATE:
In the past I've done something like this:
<h1><span>Example Text</span></h1>
h1 {background-image:url("line.png");}
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}
While that works, it's hacky, and it doesn't work well with gradient backgrounds, because the span has to have a solid background color.
What I'm really looking for is something like this:
<h1>Example Text</h1>
h1 {background-image:url("line.png");} /* but don't appear under the example text */
I misspoke about the :after thing in the original post, I was thinking of another issue I had in the past.
You could do something like the following:
HTML
<div class="border">
<h1>Hello</h1>
</div>
CSS
h1 {
position: relative;
bottom: -17px;
background: #fff;
padding-right: 10px;
margin: 0;
display: inline-block;
}
div.border {
border-bottom: 1px solid #000;
}
Here is the JsFiddle to the above code.
After doing some more research, I think I found the best solution:
h2 {
color: #F37A1F;
display: block;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 25px;
margin: 0;
text-transform: uppercase;
}
h2:after {
background: url("../images/h2.png") repeat-x center;
content: " ";
display: table-cell;
width: 100%;
}
h2 > span {
display: table-cell;
padding: 0 9px 0 0;
white-space: nowrap;
}
Modified from: How can I make a fieldset legend-style "background line" on heading text?
It still requires some extra markup, unfortunately, but it's the most minimal that I've found. I'll probably just write some jQuery to add the span automatically to the h2s.
Here is one way of doing it.
Start with the following HTML:
<h1>News<hr class="hline"></h1>
and apply the following CSS:
h1 {
background-color: tan;
display: table;
width: 100%;
}
.hline {
display: table-cell;
width: 100%;
padding-left: 20px;
padding-right: 20px;
border: none;
}
.hline:after {
content: '';
border-top: 1px solid blue;
width: 100%;
display: inline-block;
vertical-align: middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Dsa9R/
You can repurpose the hr element to add the line after the text.
The advantage here is that you don't have to wrap the text with some other element.
Note: You can rewrite the CSS selectors and avoid declaring a class name and save a bit of typing.
I've been playing around with this, and I thought it would be pretty simple. What I'm trying to do is hover over the 'NEW' label. Once in its hover state, change the content from 'NEW' to 'ADD' using only CSS.
body{
font-family: Arial, Helvetica, sans-serif;
}
.item{
width: 30px;
}
a{
text-decoration:none;
}
.label {
padding: 1px 3px 2px;
font-size: 9.75px;
font-weight: bold;
color: #ffffff;
text-transform: uppercase;
white-space: nowrap;
background-color: #bfbfbf;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-decoration: none;
}
.label.success {
background-color: #46a546;
}
.item a p.new-label span{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span{
display: none;
}
.item:hover a p.new-label{
content: 'ADD';
}
<div class="item">
<a href="">
<p class="label success new-label"><span class="align">New</span></p>
</a>
</div>
Here's a JSFiddle to show you what I'm working with.
The CSS content property along with ::after and ::before pseudo-elements have been introduced for this.
.item:hover a p.new-label:after{
content: 'ADD';
}
JSFiddle Demo
This exact example is present on mozilla developers page:
::after
As you can see it even allows you to create tooltips! :) Also, instead of embedding the actual text in your CSS, you may use content: attr(data-descr);, and store it in data-descr="ADD" attribute of your HTML tag (which is nice because you can e.g translate it)
CSS content can only be usef with :after and :before pseudo-elements, so you can try to proceed with something like this:
.item a p.new-label span:after{
position: relative;
content: 'NEW'
}
.item:hover a p.new-label span:after {
content: 'ADD';
}
The CSS :after pseudo-element matches a virtual last child of the
selected element. Typically used to add cosmetic content to an
element, by using the content CSS property. This element is inline by
default.
.label:after{
content:'ADD';
}
.label:hover:after{
content:'NEW';
}
<span class="label"></span>
This little and simple trick I just learnt may help someone trying to avoid :before or :after pseudo elements altogether (for whatever reason) in changing text on hover. You can add both texts in the HTML, but vary the CSS 'display' property based on hover. Assuming the second text 'Add' has a class named 'add-label'; here is a little modification:
span.add-label{
display:none;
}
.item:hover span.align{
display:none;
}
.item:hover span.add-label{
display:block;
}
Here is a demonstration on codepen: https://codepen.io/ifekt/pen/zBaEVJ
how can I make a custom checkbox with css only (no JS no JQ) with content:"on" when checked and content:"off" when uncheked.
Thanks.
reedit
OK, after LOT of copy/paste/delete, it work now.
Thank.
input[type=checkbox] {
position: relative;
visibility: hidden;
cursor: pointer;
}
input[type=checkbox]:after {
display: block;
content: "OFF";
position: absolute;
top: 0;
right: -30px;
visibility: visible;
height: 30px;
line-height: 30px;
width: 50px;
text-align: center;
border-radius: 4px;
background: #d00;
color: #fff;
font-weight: 600;
cursor: pointer;
}
input[type=checkbox]:checked:after {
content: "ON";
background: #0a0;
}
<input type="checkbox" />
It is possible. Check out these blog posts by Ryan Seddon. He explain how you can play with checkbox and CSS
http://www.thecssninja.com/css/custom-inputs-using-css
http://www.thecssninja.com/css/futurebox3
http://www.thecssninja.com/css/css-tree-menu
Creating an actual element with CSS isn't possible. You can however style a checkbox using css.
An example:
input[type=checkbox] {
outline: 2px solid #f00;
}
Relying on pure CSS is also a give-or-take when dealing with different browsers and platforms. I hope this answers your question.
I believe this is impossible with just css. Css decorates a html element and does not change its properties. If you click the checkbox, the box will have to do a postback to show it on the page. In which case the css will be the same. You need javascript.
What makes you not want to use javascript?