i have included some checkboxes within my html page so the user can check and uncheck them, i also wrote the style to highlight the checkbox borders and also the label but still nothing work.
can do with a bit of help.
<input type="checkbox" name="createartwork" id="createartwork">
<label class="label-for-check" for="createartwork">I want your Designer to create my artwork</label>
input[type=checkbox]:checked + label::after{
background-color: #FD6418;
}
input:checked {
height: 50px;
width: 50px;
}
<input type="checkbox" name="createartwork" id="createartwork">
<label class="label-for-check" for="createartwork">I want you to create my artwork</label>
:checked + label {
background-color: #FD6418;
font-weight: bold;
}
Try this.
You're a bit off track, you cannot style the original <input> tag, you can fake a new checkbox with your label, so using the code you provided:
HTML:
<input type="checkbox" name="createartwork" id="createartwork">
<label class="label-for-check" for="createartwork">
I want you to create my artwork</label>
CSS:
input[type=checkbox]
+ label::before {
content: '';
width: 5px;
height: 5px;
background-color: #FF0;
margin-right: 5px;
padding: 0px 5px;
}
input[type=checkbox]:checked + label::before{
content: 'x';
background-color: #FF0;
margin-right: 5px;
padding: 0px 5px;
}
input[type=checkbox] {
display: none;
}
And of course, a working example
Related
I want to add an asterisk mark to placeholder of inputs. Something like this:
I have searched internet but could not find a working solution.
My current approach:
Currently I am trying to add it in the after pseudo element but that is not appearing.
input[type=text]::-webkit-input-placeholder:after {
content: '*';
color: red; vertical-align: top; font-size: 10px;
}
input[type=text]:-moz-placeholder:after { /* Firefox 18- */
content: '*';
color: red; vertical-align: top; font-size: 10px;
}
input[type=text]::-moz-placeholder:after { /* Firefox 19+ */
content: '*';
color: red; vertical-align: top; font-size: 10px;
}
input[type=text]:-ms-input-placeholder:after {
content: '*';
color: red; vertical-align: top; font-size: 10px;
}
<input type="text" name="your-name" placeholder="Naam">
I do not want to add the symbol directly in the placeholder. But would love it in any other way that will let me style the symbol differently.( say I want blue color for my symbol but rest of the text in grey).
So, if anyone can help me add an asterisk to the placeholder.
JSFIDDLE
Why don't you simply use * in placeholder attribute itself?
.asterisk::-webkit-input-placeholder {
color: #f00;
}
.asterisk:-moz-placeholder {
color: #f00;
opacity: 1;
}
.asterisk::-moz-placeholder {
color: #f00;
opacity: 1;
}
.asterisk:-ms-input-placeholder {
color: #f00;
}
<input type="text" name="your_name" placeholder="*" class="asterisk" />
EndNote: You can't use pseudo elements in replaced html elements
As per your comment you can also use required attribute and then style them like this:
<input type="text" name="your_name" placeholder="*" required />
[required]::-webkit-input-placeholder {
color: #f00;
}
As per your next comment requirement, you need to wrap your input which needs asterisks in a span like below:
.input-group{
position: relative;
}
.input-group::after{
content: '*';
position: absolute;
top: 3px;
left: 46px;
color: #f00
}
<span class="input-group">
<input type="text" name="your_name" placeholder="Naam" />
</span>
Well, I can change the size of "Radio" using CSS but I cant quit the border and change the background color.
Here is my code:
<input type="radio" class="textColoPgE1" id="textColoPgE" name="textColoPgE" value="col1">
And the CSS:
.textColoPgE1
{
background-color: blue;
width: 20px;
height: 20px;
border: none;
}
How to personalize my "Radio" buttons? I hope you have a solution.
Thank you
You need to make a fake radio button and hide the (browser) default one to make it work. See the example below. First it's a blue button, but after it's been clicked (and checked), it's red.
The label:before will be the container where your fake radio button will show up.
/* Hide the radio button */
input[type=radio] {
display: none;
}
/* We style the label */
.textColoPgE1-label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 25px;
margin-right: 15px;
}
.textColoPgE1-label:before {
content: "";
display: block;
width: 20px;
height: 20px;
top: 0;
position: absolute;
background-color: blue;
left: 0;
border-radius: 50%;
}
/* We style the checked item */
.textColoPgE1:checked + .textColoPgE1-label:before {
background-color: red;
}
<input type="radio" class="textColoPgE1" id="textColoPgE" name="textColoPgE" value="col1">
<label for="textColoPgE" class="textColoPgE1-label">Radio button</label>
You have here a great example of what you need to do to make your own radio button style:
http: //codepen.io/mitchmc/pen/pebIx
Basically, you need to turn of the button and style the label.
I searched for solutions for the same issue and found this very clear and helpful explanation: http://code.stephenmorley.org/html-and-css/styling-checkboxes-and-radio-buttons/
This question already has answers here:
Styling input radio with css [duplicate]
(5 answers)
Closed 4 years ago.
I have a website where I'm trying to change the background color of the dot of a radio button. Right now it seems to be transparent so it gets the color of whatever the background is. I tried using CSS and setting "background: white;" for example, however this has no effect in the browser. Any ideas of cool tricks to use to achieve this?
Same question stands for checkbox as well.
jsBin demo
This technique uses the label element bound to hidden input elements, that receiving a :checked state will change the apperance of the :before pseudo element:
/* COMMON RADIO AND CHECKBOX STYLES */
input[type=radio],
input[type=checkbox]{
/* Hide original inputs */
visibility: hidden;
position: absolute;
}
input[type=radio] + label:before,
input[type=checkbox] + label:before{
height:12px;
width:12px;
margin-right: 2px;
content: " ";
display:inline-block;
vertical-align: baseline;
border:1px solid #777;
}
input[type=radio]:checked + label:before,
input[type=checkbox]:checked + label:before{
background:gold;
}
/* CUSTOM RADIO AND CHECKBOX STYLES */
input[type=radio] + label:before{
border-radius:50%;
}
input[type=checkbox] + label:before{
border-radius:2px;
}
<input type="radio" name="r" id="r1"><label for="r1">Radio 1</label>
<input type="radio" name="r" id="r2"><label for="r2">Radio 2</label>
<input type="checkbox" name="c1" id="c1"><label for="c1">Check 1</label>
<input type="checkbox" name="c2" id="c2"><label for="c2">check 2</label>
It's been well stablished that you cannot change every detail on browser generated controls. For example the color of the arrow on a select dropdown, or the dot of a radio, etc...
You can create your custom controls, use some library like JQuery UI, or.... maybe play around a little with css.
Here's an experiment to fake a colored dot on a radio, using :before pseudo element:
http://jsfiddle.net/bvtngh57/
input[type="radio"]:checked:before {
content: "";
display: block;
position: relative;
top: 3px;
left: 3px;
width: 6px;
height: 6px;
border-radius: 50%;
background: red;
}
Result:
The preferred method for styling the non-label elements of checkboxes and radio buttons with CSS is to essentially replace them with images that represent their current state (unchecked, checked, etc).
See this article by Ryan Seddon: http://www.thecssninja.com/css/custom-inputs-using-css
The browser itself handles the look of radio buttons and checkboxes, as well as dropdown/selects. You can however hide the radio buttons, replace them with images, and then modify your radio/check value using jQuery. Font Awesome (http://fortawesome.github.io/Font-Awesome/icons/) has some cool icons that you can use for this.
Here is a demo
<div>
Radio 1 -
<input type="radio" name="radio" class="radio" value="1" />
<span class="red fa fa-circle-o"></span>
</div>
<div>
Radio 2 -
<input type="radio" name="radio" class="radio" value="2" />
<span class="blue fa fa-circle-o"></span>
</div>
$('span.fa').on('click', function() {
$('span.fa').removeClass('fa fa-dot-circle-o').addClass('fa fa-circle-o');
$(this).removeClass('fa-circle-o').addClass('fa-dot-circle-o');
//Check corresponding hidden radio
$(this).prev('input.radio').prop('checked', true);
});
There are many ways to do this, all of them involve to get rid of the DOM styles since it's impossible to do it without these "tricks". Here's a sample by Chris Coyier (just read the page, skip step 1 and simply prepare teh images and CSS)
/*
Hide the original radios and checkboxes
(but still accessible)
:not(#foo) > is a rule filter to block browsers
that don't support that selector from
applying rules they shouldn't
*/
li:not(#foo) > fieldset > div > span > input[type='radio'],
li:not(#foo) > fieldset > div > span > input[type='checkbox'] {
/* Hide the input, but have it still be clickable */
opacity: 0;
float: left;
width: 18px;
}
li:not(#foo) > fieldset > div > span > input[type='radio'] + label,
li:not(#foo) > fieldset > div > span > input[type='checkbox'] + label {
margin: 0;
clear: none;
/* Left padding makes room for image */
padding: 5px 0 4px 24px;
/* Make look clickable because they are */
cursor: pointer;
background: url(off.png) left center no-repeat;
}
/*
Change from unchecked to checked graphic
*/
li:not(#foo) > fieldset > div > span > input[type='radio']:checked + label {
background-image: url(radio.png);
}
li:not(#foo) > fieldset > div > span > input[type='checkbox']:checked + label {
background-image: url(check.png);
}
You can style ionic radio buttons using css alone. Check the fiddle:
https://jsfiddle.net/sreekanthjayan/0d9vj86k/
<div>
<ion-radio class="radio radio-inline radio-gray" ng-model="choice" ng-value="'A'">iOS</ion-radio>
<ion-radio class="radio radio-inline radio-teal" ng-model="choice" ng-value="'B'">Android</ion-radio>
<ion-radio class="radio radio-inline radio-blue" ng-model="choice" ng-value="'C'">Windows Phone</ion-radio>
</div>
.radio .radio-icon {
visibility: visible !important;
}
.radio .radio-icon:before {
content: "" !important;
border: 2px solid black !important;
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
overflow: hidden !important;
}
.radio .radio-icon:after {
content: "" !important;
position: absolute !important;
right: 20px !important;
top: 22px !important;
background: black !important;
width: 12px !important;
height: 12px !important;
border-radius: 50% !important;
overflow: hidden !important;
transition: -webkit-transform .28s cubic-bezier(0.420, 0.000, 0.000, 1.650);
transition: transform .28s cubic-bezier(0.420, 0.000, 0.000, 1.650);
-webkit-transform: scale(0);
transform: scale(0);
}
.radio.item-radio > input[type=radio]:checked ~ .radio-icon:after {
-webkit-transform: scale(1);
transform: scale(1);
}
.radio .item-content {
background-color: #fff;
margin: 0;
padding-right: 50px;
padding-left: 0px;
}
.radio.item-radio > input[type=radio]:checked ~ .item-content {
background-color: #fff;
}
.radio-inline.item {
display: inline-block;
border: none;
margin: 0;
height: 50px;
}
.radio-blue .radio-icon:after {
background: #2196F3 !important;
}
.radio-blue .radio-icon:before {
border-color: #2196F3 !important;
}
.radio-teal .radio-icon:after {
background: #009688 !important;
}
.radio-teal .radio-icon:before {
border-color: #009688 !important;
}
.radio-gray .radio-icon:after {
background: #B6B6B6 !important;
}
.radio-gray .radio-icon:before {
border-color: #B6B6B6 !important;
}
So, I've been stuck at this for a couple of hours. I'm essentially trying to get a checkbox to work as a toggle button. I want the styles applied by jquery to be only applied when it's checked and back to it's initial if it has been deselected.
The HTML markup:
<form class="simple_form new_mailing_list_form" data-remote="true" id="new_mailing_list_form" method="post">
<div class="input boolean optional mailing_list_form_opt_in">
<input name="mailing_list_form[opt_in]" type="hidden" value="0">
<label class="boolean optional control-label checkbox toggle-button" for="mailing_list_form_opt_in">
<input checked="checked" class="boolean optional" id="mailing_list_form_opt_in" name="mailing_list_form[opt_in]" type="checkbox" value="1">
Yes, I would like to join the mailing list.
</label>
</div>
The SCSS:
#new_mailing_list_form {
.opt {
color: $white;
background-color: $selectiveYellow !important;
border: 2px solid $selectiveYellow !important;
}
.checkbox {
margin: 0px;
padding: 0px;
}
div label input {
margin-right:100px;
}
.mailing_list_form_opt_in label {
cursor: pointer;
background: transparent;
border: 2px solid $selectiveYellow;
border-radius:2px;
font-size: 15px;
font-weight: normal;
line-height: 1.4;
overflow:auto;
margin:4px;
padding: 8px 15px;
width: auto;
&:hover {
background-color: $sunglow;
border: 2px solid $sunglow;
color: $white;
}
}
.mailing_list_form_opt_in label {
display:block;
}
.mailing_list_form_opt_in label input {
display: none;
}
.mailing_list_form_opt_in input:checked {
background-color:$selectiveYellow;
color:$white;
}
}
JQuery:
$('#mailing_list_form_opt_in').change(function () {
$(this).parent().css({ 'background-color':'#ffbb00','border':'2px solid #ffbb00', 'color':'#fff' });
});
I've tried using a conditional statement as well, but I start to descend into spaghetti JQuery which doesn't even work.
Work on it so far: Working CodePen link
You could use jQuery's toggleClass() method to change the background whenever a user clicks the element.
$("#checkbox_elem").on( "click", function(){
$(this).toggleClass( 'background-class' );
});
Now all you have to do is have a default style on the element, and place the new CSS rules into the background-class class definition. Clicking the element will toggle the class on the element.
You could use an explicit check on the element if you want to add some more functionality:
$("#checkbox_elem").on( "click", function(){
if ( $(this).is(':checked') ){
// the checkbox is marked as "checked"
// here you can manipulate the style accordingly
}else{
// the checkbox is NOT marked as "checked"
// here you can manipulate the style accordingly
}
});
So, I'm sharing my pure HTML5/CSS3 solution (which doesn't use any JS/JQuery!) to this problem so that it could be helpful for others stuck on something similar.
I refactored my markup as follows,
HTML:
<input id="mailing_list_form_opt_in" name="mailing_list_form[opt_in]" type="checkbox" value="1">
<label for="mailing_list_form_opt_in">Yes, I would like to join the mailing list.</label>
and for the styles, I used the adjacent selector + & the pseudo class :checked to show the behavior on that state. The corresponding styles for that are as follows,
SCSS:
input[type=checkbox] + label {
background: transparent;
border: 2px solid $selectiveYellow;
border-radius: 2px;
-webkit-font-smoothing: subpixel-antialiased;
font-size: 15px;
font-weight: normal;
line-height: 1.4;
overflow: auto;
margin: 4px;
padding: 8px 15px;
#include transition( 0.25s linear);
width: auto;
&:hover {
background-color: $sunglow;
border: 2px solid $sunglow;
color: $white;
}
}
input[type=checkbox]:checked + label {
background: $selectiveYellow !important;
border: 2px solid $selectiveYellow !important;
color: $white;
}
input[type=checkbox] {
display: none;
}
Works perfectly, added a Codepen so that you can check that out as well! Hope this helps others! :D
I would like to show checkbox as toggle button. But I can't apply my custom pictures to it with CCS -- still checkbox is drawn. How to accomlish this task?
My CSS:
input[type=checkbox]#settingsbutton {
border-style: none;
background-color: transparent;
width: 42px;
height: 40px;
display: block;
}
input[type=checkbox].button-settings {
background-image: url("images/button-settings-normal.png");
}
input[type=checkbox].button-settings:active {
background-image: url("images/button-settings-normal.png");
}
input[type=checkbox].button-settings:hover {
background-image: url("images/button-settings-hover.png");
}
input[type=checkbox].button-settings:active {
background-image: url("images/button-settings-pressed.png");
}
My HTML:
<body>
<input type="checkbox" id="settingsbutton" class="button-settings"/>
</body>
If you want it's with pure css solution then you have to add label in your markup . It's a trick & write lke this:
input[type=checkbox]{
display:none;
}
input[type=checkbox] + label{
height: 40px;
width: 42px;
}
body:not(#foo) input[type=checkbox]:checked + label{
background-image: url("images/button-settings-normal.png");
}
body:not(#foo) input[type=checkbox] + label{
background-position:0 -46px; /* as per your requirement*/
height: 40px;
}
HTML
<body>
<input type="checkbox" id="settingsbutton" class="button-settings"/>
<label for="settingsbutton"></label>
</body>
Read these articles :
http://www.thecssninja.com/css/custom-inputs-using-css
http://www.wufoo.com/2011/06/13/custom-radio-buttons-and-checkboxes/
But it's not work in IE8 & below
See this link for styling check-boxes: http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
The solution involves hiding the check-box and adding a styled element in place of it, which emulates the check-box's behavior.
Try this solution if you have some text in label
input[type=checkbox]{
display:none;
}
input[type=checkbox] + label:before{
height: 42px;
width: 42px;
content: url("../img/chk.jpg");
}
body input[type=checkbox]:checked + label:before{
content: url("../img/chk_checked.jpg");
}