I have some buttons using <button>, which when clicked get a blue selected color!
Is there a way to remove this feature?
That is a default behaviour of each browser; your browser seems to be Safari, in Google Chrome it is orange in color!
Use this to remove this effect:
button {
outline: none; // this one
}
You can remove the blue outline by using outline: none.
However, I would highly recommend styling your focus states too. This is to help users who are visually impaired.
Check out: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#navigation-mechanisms-focus-visible. More reading here: http://outlinenone.com
You can remove this by adding !important to your outline.
button{
outline: none !important;
}
This is an issue in the Chrome family and has been there forever.
A bug has been raised https://bugs.chromium.org/p/chromium/issues/detail?id=904208
It can be shown here: https://codepen.io/anon/pen/Jedvwj as soon as you add a border to anything button-like (say role="button" has been added to a tag for example) Chrome messes up and sets the focus state when you click with your mouse. You should see that outline only on keyboard tab-press.
I highly recommend using this fix: https://github.com/wicg/focus-visible.
Just do the following
npm install --save focus-visible
Add the script to your html:
<script src="/node_modules/focus-visible/dist/focus-visible.min.js"></script>
or import into your main entry file if using webpack or something similar:
import 'focus-visible/dist/focus-visible.min';
then put this in your css file:
// hide the focus indicator if element receives focus via mouse, but show on keyboard focus (on tab).
.js-focus-visible :focus:not(.focus-visible) {
outline: none;
}
// Define a strong focus indicator for keyboard focus.
// If you skip this then the browser's default focus indicator will display instead
// ideally use outline property for those users using windows high contrast mode
.js-focus-visible .focus-visible {
outline: magenta auto 5px;
}
You can just set:
button:focus {outline:0;}
but if you have a large number of users, you're disadvantaging those who cannot use mice or those who just want to use their keyboard for speed.
Related
Whenever i click on the top primary menu options of my website then unwanted dotted rectangle shape appears. This is my wordpress website and here i am using astra theme. Please see the attached screenshot1 below for more clarity of this issue.Please tell me how i can remove or rectify this because it looks so unprofessional.
Your browser adds this to <a> elements, when they become “active” or “focused” (e.g. clicked). You can disable this behavior by adding this to style.css:
:focus {
outline: none;
}
::-moz-focus-inner {
border: 0;
}
Consider adding new focus styles of your own because that outline we just disabled was intended for accessibility.
Whenever I click on any of the components I get a black border, although when I click away the border disappears. How do I prevent the web app from doing so?
Below there is a picture of what I get in my app.
Also, this is a link to a sandbox where I have the same issue:
https://codesandbox.io/s/es6-spread-operator-practice-drbyh?file=/src/components/App.jsx
This is caused by the &focus css selector as shown bij the inspector.
Add outline: none to the <button> to remove it;
<button style={{outline: 'none'}} onClick={onInputSubmit}>
This is because the :focus pseudo-class is adding an outline into the button. You can change that behaviour by using css like this:
button:focus {
outline: none;
}
Or by adding it as an inline style as well, even though I personally don't recommend it because having a lot of inline styles could cause to have a messy and hard to read HTML.
I want user to select a theme which he wants to apply to the document.
So i have created a popup dialog which has multiple themes which are qradiobutton. But I want to display only icons and remove circle from the widget.
I have tried visible:hidden for the radio button but that didn't worked.
If you want to customize QRadioButton with style-sheets I suggest you check the reference documentation: https://doc.qt.io/qt-5/stylesheet-reference.html#qradiobutton-widget
You should also find useful the examples given in Qt documentation as it shows how to replace the check indicator by different images:
QRadioButton::indicator {
width: 13px;
height: 13px;
}
QRadioButton::indicator::unchecked {
image: url(:/images/radiobutton_unchecked.png);
}
QRadioButton::indicator:unchecked:hover {
image: url(:/images/radiobutton_unchecked_hover.png);
}
https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-qradiobutton
If you do this yo can just use the indicator to display the icon and leave the QRadioButton label empty.
However, I have to warn you, depending on which QStyle you are using, it could happen that using style-sheets destroys completely the style of a component. A general example is: you are using a style where buttons have round corners, you use style-sheets to change the font of the button and as a result the button does not have round corners anymore. This is caused by incompatibilities between some QStyle and the style-sheet mechanism. If you do not want to make a multi platform app, it might not be an issue as you will use only one style, but if you make an multi platform app, you have to check every possible style you platform can have on the different platforms.
So if you want to have a QRadioButton without indicator and not use style-sheets, you can do it in C++ directly by subclassing QAbstractButton. Just make sure you set your class to be autoExclusive so that is will behave like a radio button.
would you try this? ( visible => visibility )
input[type="radio"] {
visibility: hidden;
}
or
input[type="radio"] {
display: none;
}
I am currently styling my App with the css plugin for codename one and I cannot figure out why the default look of the Button is different for android and IOS.
In IOS it looks like this:
In Android it looks like this:
It should look like it does in IOS for all devices.
In the Css file, I have this entry for Button:
Button {
cn1-derive: Button;
background-color: #005EA8;
color: white;
}
Button.unselected {
cn1-derive: Button.unselected;
background-color: #005EA8;
color: white;
}
Button.pressed {
cn1-derive: Button.pressed;
background-color: white;
color: #005EA8;
}
Its not just the Login Button that should look like this, but All buttons. None of the Buttons looks like they should on Android, but all look like it in IOS.
In Addition, as you might notice, the look changes on click. In IOS this works as expected, In Android the text color changes on click to #0005ea8, but the background is still this grey.
What am I missing here?
This is one of the ugly parts of CSS meets CN1 themes. The problem is that your CSS theme is being applied over top of the CN1 native theme. Any properties that you set on Button will override whatever those properties were in the native theme, but there are other properties of Button from the native theme that you are not overriding.
Further, CN1 styles offer three ways to set the "background" of the component. In ascending order of priority, they are:
Background color
Background (image)
Border (9-piece borders effectively set the entire background).
If you apply two of these in the same style, then the one lower on the list (higher in number) will take priority. E.g. if you set both the background color and a 9-piece border, then you won't see the background color at all - you'll just see the 9-piece border.
So what is happening here is that you've set the background color for your button in CSS, but the native theme likely set a background image, or a 9-piece border on the Button style which is still overriding your settings.
There are a couple of solutions to your problem:
Solution 1: Override the other "background" properties
Set border: none (to ensure that you override any 9-piece border) (or set border to something). And specify the cn1-background-type: none to ensure that there isn't an image background being applied to it:
Button {
background-color: #005EA8;
color: white;
border: none;
cn1-background-type: none;
}
NOTE: You also don't need to specify cn1-derive: Button because your style name actually is Button.
Solution 2: Create your Own Button classes from the ground up
If you don't want the baggage of the native theme, just create your own style, and set it exactly how you want.
e.g.
MyButton {
...
}
And in your Java code:
btn.setUIID("MyButton");
i've a TabBar that after the last Chrome upgrade (32.0.1700.76 m) is displayed with an outline on focused tabs:
In past version there wasn't. To restore old view i tried to set some outline in CSS, like this:
.gwt-TabBar .gwt-TabBarItem:focus {
outline: lime auto 5px !important;
}
(lime is just for see if it works).
Even this edit, the computed style still remains the default (-webkit-focus-ring-color auto 5px;
):
What should i do to override this user agent style?
EDIT
I think the blue outline is not of the HTML (div):
The one i want to put away is on the TabBar Item object:
I honestly don't know why the Churro solution worked before :(
I tried the following CSS to highlight the textarea on this Stackoverflow page, and it worked:
.wmd-input:focus {
outline: lime auto 5px !important;
}
Make sure your selector in front of :focus is correct.
EDIT
I took a look at a TabPanel in my own GWT app. The element that gets a blue ring around it in a TabBarItem is the Label (div) containing the tab's text, not the gwt-TabBarItem.
Try this selector: .gwt-TabBar .gwt-TabBarItem-selected .gwt-Label:focus