I am trying to change the icon permanently from "add" to "done" after I click the icon. If I click the icon again, it should change from "done" to "add."
I am wondering if it is possible to do this with CSS without using Javascript.
.material-icons::before {
content: "add";
}
section:active .material-icons::before {
/*background-color: red;*/
content: "done";
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans" rel="stylesheet">
<section>
<span id="btn1" class="material-icons"></span>
</section>
Here's the simplest CSS checkbox hack solution, you can start from here:
/* The hack */
input[type=checkbox] {
display:none;
}
label {
-webkit-appearance: push-button;
-moz-appearance: button;
display: inline-block;
cursor: pointer;
}
/* Default State */
input[type=checkbox] + section .material-icons::before {
content:"add";
}
/* Toggled State */
input[type=checkbox]:checked + section .material-icons::before {
content:"done";
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans"
rel="stylesheet">
<label>Click Me
<input type="checkbox">
<section>
<span id="btn1" class="material-icons"></span>
</section>
</label>
The way this works, is there are two <span>'s, (one with the add and one with the done icon) and a checkbox all stacked on top of each other, an the done icon is hidden. The add icon is pointer-events: none;, and when you click on it the checkbox gets checked. Then the add icon gets hidden, and the done icon gets shown.
(Only works if you click directly on the text)
.done,
.add, .done {
position: absolute;
top: 0;
left: 0;
background-color: white;
}
.done { display: none; }
.add { display: inline-block; pointer-events: none; }
label {
display: inline-block;
cursor: pointer;
position: relative;
}
input[type=checkbox] { position: absolute; top: 0; left: 0; }
input[type=checkbox]:checked~.done { display: inline-block; }
<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Open+Sans" rel="stylesheet">
<input type="checkbox">
<div class="add">
<span id="btn1" class="material-icons first">add</span>
</div>
<div class="done">
<span id="btn1" class="material-icons">done</span>
</div>
Using your own html/css stuff:
Let me know if this helped you.
.material-icons.md1::before{
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 33px;
content:"add";
}
.btnwrap:hover .material-icons.md1::before{
content:"done";
}
Codepen
Related
I have been toying with this for hours and decided to ask. I am trying to replace my checkboxes with Font Awesome icons within a circle div. When the checkbox is checked the circle color is supposed to change.
I have managed to get the icons to replace the checkboxes, but I can not get the background to change when selected. I personally think I over thought this and it could probally be done much simpler, but this is what I have.
HTML:
<div class="actions thread-actions">
<div class="checkbox visible">
<button class="action primary-action visible" title="$vbphrase[save_changes]">
<label for="cb_visible"><input type="checkbox" name="visible" value="yes" id="cb_visible" checked /></label>
</button>
</div>
</div>
CSS: (SCSS)
$brand-success: #5cb85c !default;
$brand-danger: #d9534f !default;
.thread-actions .checkbox {
input[type=checkbox] {
position: absolute;
margin-left: -100em;
margin-right: 100em;
font-size: 1em;
}
input[type=checkbox]:before {
position: absolute;
left: 99em;
}
}
/* Colors ---------------------- */
.thread-actions input[type=checkbox]:checked {
color: $brand-success;
}
.thread-actions {
input[type=checkbox]:before {
font-family: 'FontAwesome';
}
}
.thread-actions {
.checkbox.visible input[type=checkbox]:before {
content: "\f023";
margin: -22px 0px 0px 17px;
}
.checkbox.visible input[type=checkbox]:checked:before {
content: "\f023";
background-color: #ff0000;
/* f3c2 */
}
}
.actions .action {
font-size: 26px;
border: 0;
border-radius: 50%;
height: 48px;
width: 48px;
position: relative;
}
How can I achieve this effect?
I have a live PEN here where I have been playing with this.
After starting from scratch and re-thinking this through, I managed to come up with a solution.
Instead of enclosing the input with pointless divs, then trying to style each div I worked with only the input.
To achieve this effect, start by pushing the standard checkmark out of the way:
input[type=checkbox] {
font-family: 'FontAwesome'; // tell this element to use FA
position: absolute; // absolutely push this thing away
margin-left: -100em; // buh bye checkmark
font-size: 26px; // FA icon size
}
With the checkbox out of the way we can move on to styling as we wish:
input[type=checkbox]:before {
left: 100em; // where the checkmark should have been
border-radius: 50%; // circle
position: absolute; // we want it absolutely where we placed it
text-align: center; // FontAwesome icon alignment
height: 40px; // height of the circle
width: 40px; // width of the circle
background-color: #337ab7; // circle color
color: white; // icon color
content: "\f070"; // FA icon
}
With this as a base we can move on to styling our checked boxes by simply overriding our base style:
input[type=checkbox]:checked:before {
content: "\f06e"; // FA icon
background-color:#be0000; // circle color
}
Sometimes going back and rethinking things helps, hope this helps someone =)
Here is a live preview of the end result.
I'm still a novice at webdev and this is my first question here so please bare with me. I'm currently working on a website for my school and I'm trying to add a search box like this(with the search icon inside the box): click this
I'm following the search bar tutorial from w3schools, but their version is a bit different(search icon on the outside): click this
This is the html code for the search bar:
<input type="text" placeholder="Search..">
I want to put the search icon inside the box like the first picture, but the input tag is a empty tag, so I don't know how to put it inside. Please help me.
i have used font awesome for search icon, u can use local search icon, font awesome icons, material design icons or any icon source just use this below code.
.custom-select {
position: relative;
width: 250px;
outline: none;
height: 50px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: none;
padding: 0;
border-radius: 5px;
z-index: 555;
}
.custom-select-search-icon {
position: absolute;
z-index: 2;
height: 22px;
width: 22px;
right: 10px;
opacity: 0.5;
}
.custom-select-input {
padding: 0 10px;
border-radius: inherit;
width: inherit;
height: inherit;
background: transparent;
color: #051833;
}
<!-- Load icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="custom-select">
<input type="text" placeholder="Search please" class="custom-select-input">
<i class="fa fa-search custom-select-search-icon"></i>
</div>
This should give you a basic idea of how it can be done:
document.getElementById('sb').addEventListener("click", function(e){
if(e.target.nodeName =='SPAN') {
let elem = e.target.children[0];
elem.focus();
}
});
.outer {
border: 1px solid gray;
padding: 10px;
border-radius:5px;
}
.outer img {
height: 22px;
width: 22px;
top:5px;
position:relative;
}
input {
/* Tell the input to use all the available space */
flex-grow:2;
/* And hide the input's outline, so the form looks like the outline */
border:none;
}
input:focus {
/* removing the input focus blue box. Put this on the form if you like. */
outline: none;
}
button {
/* Just a little styling to make it pretty */
border:1px solid blue;
background:blue;
color:white;
}
<span class="outer" id="sb">
<input placeholder="Search.."/>
<img src="http://assets.stickpng.com/thumbs/585e4ad1cb11b227491c3391.png">
</span>
Hi there I try to make it possible that you first need to click on the element and after that it should chang the background everytime you hover over it. Important is that No JavaScript or JQuery should be used. It's not a link so :visited and href is not an option
*Pseudocode*
*if* .lst-c:active *than* .lst-c:hover {
background: blue;
border-radius: 20px 20px 0px 0px !important;
}
You can try the Checkbox Hack
http://timpietrusky.com/advanced-checkbox-hack
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
div {
background: green;
}
input[type=checkbox]:checked ~ div:hover {
background: red;
}
<label for="toggle-1">Do Something</label>
<input type="checkbox" id="toggle-1">
<div>Control me</div>
Checkbox
/* Hide */
.is { display: none }
/* Is checked */
.is:checked + label .content:hover { background: blue; }
/* Not checked */
.content:hover { background: red; }
<input type="checkbox" class="is" id="clicker">
<label for="clicker">
<div class="content">Hello</div>
</label>
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.
As a relative newbie to CSS and HTML5, I have been using a CSS file that I found at Bootstrap checkbox replacement to display font awesome checkboxes and radio buttons. It works fine in Chrome but not in Internet Explorer even though the W3C validator shows it as valid.
Does anyone have any ideas what is wrong?
/* CSS used here will be applied after bootstrap.css */
.demo {
padding:50px;
}
.demo label{
top:3px; left:15px;
margin-right:30px;
position:relative;
}
input.faChkRnd, input.faChkSqr {
visibility: hidden;
}
input.faChkRnd:checked:after, input.faChkRnd:after,
input.faChkSqr:checked:after, input.faChkSqr:after {
visibility: visible;
font-family: FontAwesome;
font-size:25px;height: 17px; width: 17px;
position: relative;
top: -3px;
left: 0px;
background-color:#FFF;
display: inline-block;
}
input.faChkRnd:checked:after {
content: '\f058';
}
input.faChkRnd:after {
content: '\f10c';
}
input.faChkSqr:checked:after {
content: '\f14a';
}
input.faChkSqr:after {
content: '\f096';
}
Edited
So just to clarify, if you open up http://www.bootply.com/H289A4AIGZ# in Chrome the checkboxes display correctly but when you open it up in IE11 they do not appear at all - regardless of the valid CSS.
I've fought this before, and if I remember correctly, IE hides the :before pseudo element along with the checkbox, or just doesn't support :before on checkboxes.
The best I have done is here: http://jsfiddle.net/rally25rs/MRa2H/
The 3rd (black colored) checkbox works in IE but the other 2 don't.
It works by using the sibling selector to decide which icon to show.
.works-in-ie input[type="checkbox"]:checked ~ .checked
{
display: inline-block;
}
.works-in-ie input[type="checkbox"]:checked ~ .unchecked
{
display: none;
}
.works-in-ie input[type="checkbox"] ~ .checked
{
display: none;
}
.works-in-ie input[type="checkbox"] ~ .unchecked
{
display: inline-block;
}
.works-in-ie input[type="checkbox"] {
display: none;
}
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="works-in-ie">
<label><input type="checkbox"/><i class="fa fa-arrow-down unchecked"></i><i class="fa fa-arrow-up checked"></i> Click Me</label>
</div>
Here is a screenshot of this answer and the code snippet working in IE11: