I wonder if it is possible to style just focus on tab (using ↹ to navigate through the page)but not if the user click on the item.
Just like the default behaviour of checkboxes. It gets a blue outline (looks like box-shadow) if I use tab.
Like I want a new red box-shadow/outline on focus by tab but not if the user clicks on the checkbox.
<input id="checkBox" type="checkbox">
you can do it by Jquery
document.addEventListener('keydown', function(e) {
if (e.keyCode === 9) {
$('#checkBox').addClass('outline');
}
});
document.addEventListener('click', function(e) {
$('#checkBox').removeClass('outline');
});
.outline{
box-shadow: 2px 2px 2px red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="checkBox" type="checkbox">
OR
this plugin:https://github.com/ten1seven/track-focus
in css:
body[data-whatinput="keyboard"] #checkBox:focus {
box-shadow: 0 0 5px red;
}
Focus will be when you're holding the mouse down on it. If you don't want it when clicked you can use hover instead.
input:hover {
box-shadow: 2px 2px 2px rgba(255,0,0,.5);
}
input:checked {
box-shadow: none;
}
<input id="checkBox" type="checkbox">
You can also create your own styling by styling the label. check this out https://www.w3schools.com/howto/howto_css_custom_checkbox.asp
You could style all possible states of the checkbox:
input:focus {
box-shadow: 2px 2px 2px rgba(255,0,0,.5);
}
input:checked {
box-shadow: none;
/* HIDE OUTLINE - ACCESSIBILITY BAD PRACTICE */
outline: none;
}
<input id="checkBox" type="checkbox">
Using the solution from the link I provided you in a comment,
(Input effect on keyboard tab -> focus, but NOT on click)
Here is what I'll do:
var body = document.getElementsByTagName("BODY")[0];
document.addEventListener('keydown', function(e) {
if (e.keyCode === 9) {
body.classList.add('show-focus-outlines');
}
});
document.addEventListener('click', function(e) {
body.classList.remove('show-focus-outlines');
});
body.show-focus-outlines input:focus {
outline: none;
box-shadow: 0 0 8px 2px red;
}
body:not(.show-focus-outlines) input:focus {
outline: none;
}
<body>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</body>
Note that I used Javascript only (in the link, that was jQuery),
and tried to render something nice with the CSS.
Hope it helps.
very simple.
you can use :focus for styling elements
if you want different style for Clicked on object use :active to style it.
here is an example for <a> tag.
.click,.focus{
color : red;
text-decoration: none;
}
.click:focus{
outline: none;
color: red;
text-decoration: none;
background-color: #fff;
}
.click:active{
color: green;
background-color: #fda;
outline: none;
text-decoration: none;
}
.focus:focus{
color: green;
background-color: #fda;
outline: none;
text-decoration: none;
}
.focus:active{
outline: none;
color: red !important;
text-decoration: none;
background-color: #fff !important;
}
<a class="click" href="#">Click Me</a><br>
<a class="focus" href="#">Focus me[use Tab]</a>
Related
I use custom radio buttons which I need to verify via HTML5 form verification. Each option has the required attribute. The CSS :invalid selector should then color the border of the span covering the button in red as soon as the user clicks the form submit button. Unfortunately, the border gets colored on-load of the page, submit button hasn't been even clicked. Any ideas?
input[type="radio"] {
opacity: 0;
position: absolute;
z-index: -1;
}
label input[type="radio"]:checked+.form-btn-radio {
background-color: blue;
text-decoration: none;
color: white;
border: 2px solid blue;
}
label input[type="radio"]:invalid+.form-btn-radio {
border: 2px solid red;
}
.form-btn-radio {
border: 2px solid black;
color: black;
padding: 10px 25px 10px 25px;
min-width: 60px;
background-color: white;
text-decoration: none;
text-align: center;
display: inline-block;
cursor: pointer;
}
<label for="apply">
<input type="radio" id="apply" name="apply" value="easy" required>
<div class="form-btn-radio">Option 1 Name</div>
</label>
<label for="apply-external">
<input type="radio" id="apply" name="apply" value="url" required>
<div class="form-btn-radio">Option 2 Name</div>
</label>
found the issue: "If any one of the radio buttons in a group is required, the :invalid pseudo-class is applied to all of them if none of the buttons in the group is selected. (Grouped radio buttons share the same value for their name attribute.)"
developer.mozilla.org/en-US/docs/Web/CSS/:invalid
So JS is the only solution if you don't want to have one of the radios pre-selected.
I have a simple input of type text:
<input matInput type="text" placeholder="{{placeholder}}" class="input-field"
[ngClass]="{'error': hasErrors}" [readonly]="isReadonly" [disabled]="isDisabled">
I've added this css rule for readonly state, using the read-only selectore:
.input-field {
&:read-only {
border-style: none;
}
}
And I have this, which is correct:
The problem is that when I click on the placeholder, the focus event adds the border:
I need to get rid of that border on focus, so using :focus selector I've tried setting border: none but it doesn't work. I've tried:
.input-field {
&:read-only,:focus {
border-style: none;
}
}
and
.input-field {
&:read-only {
border-style: none;
&:focus {
border-style:none;
}
}
}
but the border keeps appearing. I am using Chrome, but I've also tried Firefox and it doesn't work.
Add this to your focus:
{ outline-style: none; box-shadow: none; border-color: transparent; }
I'm trying to create a dropdown list of border styles in an html form (dashed/dotted/solid..).
The requested behavior is that the border-style that was selected would appear when the dropdown is closed, and when opened, the selected option will be marked.
The best way was to add styling on a native select, if that was possible. So it led me to the naive solution of images as the options element, but I was wondering if there was anything better that could be achieved using css.
I tried using bootstrap in order to create it, but bootstrap dropdown opens through a button, and then I lose the "show selected" requirement.
You can try this:
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
link:-http://www.w3schools.com/css/css_border.asp
It's a bit complicated, but here's a working codepen:
http://codepen.io/krabbypattified/pen/pEBAgP
It uses a custom-made dropdown and passes values to an HTML5 dropdown (which you can hide)
Let me know if you have questions and I'll revise my answer accordingly.
HTML
<div class="dropdown">
<button onclick="showHide()" class="dropbtn">Dropdown</button>
<div id="borderList">
<!-- See CSS -->
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
<p><span></span></p>
</div>
</div>
<form>
<select id="selector">
<option value="solid">This form will be hidden.</option>
<option value="dashed">Dashed (words not required here, just values)</option>
<option value="dotted" />
<option value="double" />
<option value="groove" />
</select>
</form>
SCSS
/* Border styles */
$borders: solid, dashed, dotted, double, groove;
#borderList p span {
border-top: 5px solid black;
display: block;
}
#for $i from 1 through length($borders) {
#borderList p:nth-child(#{$i}) span {
border-top-style: nth($borders, $i);
}
}
/* Dropdown styles */
.hide { display: none !important }
.show { display: block !important }
.dropdown {
position: relative;
display: inline-block;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
&:hover, &:focus { background-color: #3e8e41 }
}
#borderList {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 110px;
box-shadow: 0px 8px 5px 0px rgba(0, 0, 0, 0.2);
p {
cursor: pointer;
margin: 0;
height: 0;
padding: 18px 0 24px 0;
&:hover { background-color: #ddd }
}
}
JS
// Added jQuery
// Pass the selected option to a hidden form
$('#borderList').children().each(function(index) {
this.addEventListener('click', function(){syncToForm(index)});
});
function syncToForm(index) {
var selector = document.getElementById("selector");
selector.options.selectedIndex = index;
}
// Toggle show/hide dropdown
function showHide() {
$('#borderList').toggleClass('show');
}
// Close the dropdown if clicked elsewhere on page
window.onclick = function(e) {
if (!e.target.matches('.dropbtn') && $('#borderList').hasClass('show')) {
$('#borderList').removeClass('show');
}
}
Thanks everyone, I found what I was looking for (select with thumbnails):
http://thdoan.github.io/bootstrap-select/examples.html
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
Do you know how I could style a checkbox when it is disabled?
E.g.:
<input type="checkbox" value="All Terrain Vehicle"
name="exfilter_All Terrain Vehicle"
id="exfilter_All_Terrain_Vehicle"
class="exfilter" disabled="">
Use the attribute selector in the css
input[disabled]{
outline:1px solid red; // or whatever
}
for checkbox exclusively use
input[type=checkbox][disabled]{
outline:1px solid red; // or whatever
}
$('button').click(function() {
const i = $('input');
if (i.is('[disabled]'))
i.attr('disabled', false)
else
i.attr('disabled', true);
})
input[type=checkbox][disabled] {
outline: 2px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="tasd" disabled />
<input type="text" value="text" disabled />
<button>disable/enable</button>
You can't style a disabled checkbox directly because it's controlled by the browser / OS.
However you can be clever and replace the checkbox with a label that simulates a checkbox using pure CSS. You need to have an adjacent label that you can use to style a new "pseudo checkbox". Essentially you're completely redrawing the thing but it gives you complete control over how it looks in any state.
I've thrown up a basic example so that you can see it in action: http://jsfiddle.net/JohnSReid/pr9Lx5th/3/
Here's the sample:
input[type="checkbox"] {
display: none;
}
label:before {
background: linear-gradient(to bottom, #fff 0px, #e6e6e6 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #035f8f;
height: 36px;
width: 36px;
display: block;
cursor: pointer;
}
input[type="checkbox"] + label:before {
content: '';
background: linear-gradient(to bottom, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-color: #3d9000;
color: #96be0a;
font-size: 38px;
line-height: 35px;
text-align: center;
}
input[type="checkbox"]:disabled + label:before {
border-color: #eee;
color: #ccc;
background: linear-gradient(to top, #e6e6e6 0px, #fff 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
input[type="checkbox"]:checked + label:before {
content: '✓';
}
<div><input id="cb1" type="checkbox" disabled checked /><label for="cb1"></label></div>
<div><input id="cb2" type="checkbox" disabled /><label for="cb2"></label></div>
<div><input id="cb3" type="checkbox" checked /><label for="cb3"></label></div>
<div><input id="cb4" type="checkbox" /><label for="cb4"></label></div>
Depending on your level of browser compatibility and accessibility, some additional tweaks will need to be made.
Use the :disabled CSS3 pseudo-selector
You can select it using css like this:
input[disabled] { /* css attributes */ }
Checkboxes (radio buttons and <select>) are OS-level components, not browser-level. You cannot reliably style them in a manner that will be consistent across browsers and operating systems.
Your best bet it to put an overlay on top and style that instead.
Use CSS's :disabled selector (for CSS3):
checkbox-style { }
checkbox-style:disabled { }
Or you need to use javascript to alter the style based on when you enable/disable it (Assuming it is being enabled/disabled based on your question).
input[type='checkbox'][disabled][checked] {
width:0px; height:0px;
}
input[type='checkbox'][disabled][checked]:after {
content:'\e013'; position:absolute;
margin-top:-10px;
opacity: 1 !important;
margin-left:-5px;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
}
If you're trying to stop someone from updating the checkbox so it appears disabled then just use JQuery
$('input[type=checkbox]').click(false);
You can then style the checkbox.
do not put disabled in the input and apply the following styles
input[type="checkbox"] {
pointer-events: none;
}
This is supported by IE too:
HTML
class="disabled"
CSS
.disabled{
...
}
In case if you really want to add some colors to a checkbox, try this workaround.
input[type=checkbox][disabled] {
outline: 5px solid red;
outline-offset: -20px;
}