recentpopularlog in

piperh : checkbox   21

Stop Misusing Toggle Switches
about use of toggle switch, checkbox and button, according to context and state
webdesign  web  design  checkbox  switch  toggle  button  state  action  control  contextual  ux  ui 
4 weeks ago by piperh
Create custom keyboard accessible checkboxes | a11y with Lindsey
a method of styling accessible custom checkboxes. they can still be tabbed from keyboard and show focus.
webdesign  web  design  checkbox  accessible  accessibility  css  style  howto 
8 weeks ago by piperh
Pretty checkbox | Custom checkbox and radio buttons in pure css | Beautiful and nice looking
a css library to style buttons and checkboxes. V nice designs though maybe it would bloat your code if you only needed one or two.
webdesign  web  design  radio  button  checkbox  css  style 
10 weeks ago by piperh
Under-Engineered Toggles | Adrian Roselli
css-only toggles using the checkbox default browser functionality
webdesign  web  design  toggle  css-only  css  accessible  accessibility  checkbox  default 
may 2019 by piperh
Hacking Custom Checkboxes And Radios – Hacker Noon
about styling custom checkboxes and radio buttons, while maintaining accessibility
webdesign  web  design  checkbox  toggle  switch  radio  button  css  default  customise  style  accessible 
april 2019 by piperh
Styled checkbox and radio buttons from Filament but dependent on jQuery or Showstring (another js lib). Very nicely done but look like a fair amount of faff ( too much faff in fact for Amantaní ). The css file is long
webdesign  web  design  accessible  checkbox  radio  button  custom  filament  styled  css  js  javascript  script 
october 2018 by piperh
Pure CSS: Accessible Checkboxes and Radios Buttons – Clarity Design System – Medium
step-by-step how to style an accessible custom checkbox. Uses opacity:0 to hide the default checkbox
webdesign  web  design  checkbox  accessible  style  css  code  coding  howto  custom  customise  input 
october 2018 by piperh
Easy Toggle State
a js library to enable typical ui toggle effects and needs, like dropdowns, accordion, collapsible panel, switch, and more. With code examples and with added ARIA.
They say: Only set a few HTML attributes, and code the rest with your CSS skills.
3.6k compressed
webdesign  web  design  js  javascript  script  library  toggle  dropdown  navigation  button  tooltip  collapse  collapsible  modal  popup  switch  checkbox  radio 
june 2018 by piperh
CSS sidebar toggle - SB
css-only slide-in sidebar (eg, for a menu) using translateX and checkbox. Smooth action (google recommend this type of transition and say don't use width 0 to 100 cos it causes redraws). Actually it isn't css only - there's some js for changed checkbox state
web  design  webdesign  code  css-only  css  checkbox  accessible  menu  sidebar  toggle  slide  slider 
april 2017 by piperh
js for making ios style on-off slidey buttons
webdesign  web  design  css  ios  switch  check  button  on  off  checkbox  js  javascript 
june 2016 by piperh
22 Essential CSS Recipes
article showing some great uses of css. Not all supported by all modern browsers but worth rereading now and again
webdesign  web  design  css  html  blend  mode  gradient  transition  z-index  currentColor  object-fit  checkbox  radio  button  counter  shadow  @supports  position  sticky  vw  vh  scroll 
january 2016 by piperh
CSS Toggle Switch: Accessible CSS toggle switch using standard form controls
some pre-made css toggle switches. Nicely done but LOTS of css just to achieve these. Would need pruning to get rid of unused styles.
webdesign  web  design  css  toggle  switch  checkbox  code  coding 
november 2015 by piperh
Responsive Navigation Demo: Toggle Pattern
accordion dropdown toggle for narrow screens, but needs jquery and uses the checkbox hack (so, not semantic)
rwd  responsive  web  design  webdesign  menu  navigation  toggle  jquery  script  dropdown  checkbox  hack 
may 2014 by piperh
HTML Forms and Input
name="input" action="html_form_action.asp" method="get"
webdesign  web  design  webdev  html  form  forms  tag  style  input  radio  checkbox  field  reference  code  coding 
february 2014 by piperh
Edit fiddle - JSFiddle
jquery and html code to ensure that only one checkbox is checked. Script in html must go AFTER the checkboxes. Needs request for jquery in doc head
webdesign  web  design  webdev  jquery  script  checkbox  radio  button  checked  jsfiddle 
february 2014 by piperh

Copy this bookmark:

to read