Comments (6)
Hi @benny-chen-mpf
So, you want that focused border as a class?
Righ now the border will be there only for tab focus as you mentioned.
from pretty-checkbox.
Hey @lokesh-coder,
A class would be great. Right now I'm not seeing any border when a pretty-fied control gets focus.
from pretty-checkbox.
following this as well 👍
from pretty-checkbox.
I'm currently having this same issue. We are using radio buttons styled with pretty-checkbox using class="p-switch"
and when I tab through, the toggles are not showing that they have the current focus. I can use the arrow keys to select radio button states, so focus is on the correct element, but there is not visual indication that focus is on the radio buttons.
I noticed that in your website examples, when I tab into the examples for the p-switch, there is no visible focus indicator.
Did some more testing and if I remove the class p-switch
then the p-has-focus
class works on my radio buttons. Sadly, for this project, we chose pretty-checkboxes to use the switch style.
Thanks!
I found a working solution for me. This may work for other's as well.
I wrapped the <label>
element in a div and gave it a class. In my case it is:
<div class="pretty p-switch p-has-focus">
<input type="radio" name="radio1">
<div class="state">
<div class="switch-label">
<label> my label </label>
</div>
</div>
</div>
Then in CSS, I overrode the position
property like so:
.pretty.p-switch .state {
position: static;
}
Then added this CSS to the div I added:
.switch-label {
padding: .3rem; /* This will give the focus box a little padding */
margin: -.3rem; /* this will keep your element in it's proper positioning after adding the padding */
}
.pretty.p-has-focus input:focus ~ .state .switch-label {
outline: 4px auto rgba(0, 149, 255, 0.80);
-webkit-outline: 4px auto rgba(0, 150, 255, 0.80);
-moz-outline: 4px auto rgba(0, 150, 255, 0.80);
-ms-outline: 4px auto rgba(0, 150, 255, 0.80);
-o-outline: 4px auto rgba(0, 150, 255, 0.80);
}
With this code, when you tab focus on one of your input fields that are using .pretty.p-switch
the label and switch will be wrapped in a light blue, semi transparent box that mimics the default focus box.
You can simplify it if you won't want to add the padding to the focus box. You could not add the div and just add the last chunk of css directly to the .state class of .pretty.p-has-focus input:focus ~ .state
. But I think the padding helps since the switch element is a tad taller than the label text.
from pretty-checkbox.
<style>
.pretty input[type="checkbox"]:focus + .state:before {
border-color: #66afe9;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6);
}
.pretty.p-switch .state:before {
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
</style>
This will give your switches a nice Bootstrap 3 input focus look.
from pretty-checkbox.
<style> .pretty input[type="checkbox"]:focus + .state:before { border-color: #66afe9; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 4px rgba(102,175,233,.6); } .pretty.p-switch .state:before { transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; } </style>This will give your switches a nice Bootstrap 3 input focus look.
This is only a solution for the pseudo-class focus. Does anyone have an idea how to implement the pseudo-class focus-visible for a pretty-checkbox . I want there to be a border around the input, only if the user is navigating with the keyboard(by tab) , not if the user uses the mouse.
from pretty-checkbox.
Related Issues (20)
- Border still visible
- Using p-toggle and p-switch together cancels p-switch's slide animation
- Accessibility and Labeling
- Set button size independently from label HOT 2
- Its not getting selected in Mac
- Color override not working in react project
- Using @change throw error
- Project maintenance HOT 3
- Support RTL
- heroku HOT 1
- pretty-checkbox custom two colors
- required module 'shallow-clone'
- Disabled fieldset style is not applied
- Using <i> icon as label breaks the design
- Label required. This should show in docs.
- Start with state on by default HOT 3
- Change label placement HOT 1
- on mdb4 theme not working
- Slow loading link css HOT 2
- How to change color of the checkbox outline
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from pretty-checkbox.