Remove leaflet zoom control outline(?) - css

In every browser on every mobile device I've tried, my zoom control buttons have a light grey outline that doesn't show up on desktop browsers. I have tried a lot of css to get rid of it but nothing works. Does anyone know how to remove it?
This is my CSS for the controls, which does everything I need on desktop browsers but doesn't remove this outline sort of thing on mobile devices:
.leaflet-control-container {
box-shadow: none !important;
outline: 0 !important;
}
.leaflet-bar {
box-shadow: none;
}
.leaflet-bar a, .leaflet-bar a:hover {
background-color: #f0b034;
border: 1px solid #065428;
}
.leaflet-bar a:first-child, .leaflet-bar a:last-child {
border-radius: 0;
border-bottom: 1px solid #065428;
}
This is the live page I currently use for testing: click

In desktop browser, there is a shadow around the Zoom Control. It is defined by .leaflet-bar class (see Leaflet CSS line 209).
.leaflet-bar {
box-shadow: 0 1px 5px rgba(0,0,0,0.65);
}
For touch (mobile) devices, this definition is overriden by .leaflet-touch .leaflet-bar class (see line 380).
.leaflet-touch .leaflet-bar {
box-shadow: none;
}
.leaflet-touch .leaflet-bar {
border: 2px solid rgba(0,0,0,0.2);
}
You should be able to remove it by overriding this border property in your CSS.
.leaflet-touch .leaflet-bar {
border: none;
}
Demo: http://jsfiddle.net/ve2huzxw/37/

Related

How can I get around this Safari outline bug?

When using Safari, Setting an outline in CSS causes issues for selectable elements where the outline dynamically changes. Some of the outline gets left behind on previously selected elements:
.box {
outline: 1px solid black;
}
.box.selected {
outline: 5px solid blue;
}
Here is a CodeSandbox that demonstrates the problem. In order to reproduce, it has to be run on Safari: https://codesandbox.io/s/nostalgic-shockley-luu3m?file=/src/App.js&resolutionWidth=320&resolutionHeight=675
Has anyone experienced this issue and been able to solve it?
That’s how it works for the safari browser but you can try changing the style for .box from outline to border
.box {
height: 75px;
width: 100px;
border: 2px solid black;
margin: 0px 5px;
background: red;
}
.box.selected {
outline: 5px solid blue;
}

Can't omit outline with combo box

I've just started to work with SAPUI5, and I'm having some trouble regarding combo boxes.
When I open the new window I created, it starts focusing the combo box, but with an annoying dotted outline. It only disappears if I click outside the combo box, but I really need it to not show at all, not even when I click inside.
I have tried several libs and classes, but none of these gave me the desired output.
Below are the classes I tried:
.comboCreateDoc {
border-left: none;
border-right: none;
border-top: none;
outline: 0px transparent !important;
outline-style: none !important;
}
html.sap-desktop .comboCreateDoc .sapMInputBaseContentWrapper {
border: none !important;
background: transparent !important;
outline-style: none !important;
outline: 0px dotted transparent !important;
outline-offset: -3px;
}
html.sap-desktop .sapMBtn:focus > .sapMFocusable {
outline: 0px dotted transparent !important;
outline-offset: -3px;
}
html.sap-desktop .sapMCbBgs:active > .sapMFocusable {
outline: 0px dotted transparent !important;
outline-offset: -3px;
}
.sapMInputBaseIconContainer{
outline: none !important;
}
.sapMComboBoxInner .sapMInputBaseInner{
outline: none !important;
}
html.sap-desktop .sapUiBody:focus {
outline: non !important;
}
How can I make the dotted outline disappear?
I dig into their samples to find the combo box and I saw that they don't use the native browser focus.
They put a class .sapMFocus that gives that dotted border to the element.
You need to override that class styles like that:
.sapMFocus .sapMInputBaseContentWrapper::before {
border:none;
}

How to override the default focus css style of react-tab?

I am using react-tab to create an interface like this
However if i click on the tab, it will turn into this:
It is the default css style when the tab gets focus.
I have tried this css (in less) but it is unable to override the default style:
.react-tabs [role=tab],
.react-tabs [role=tablist],
.react-tabs [role=tab]:focus,
.react-tabs [role=tablist]:focus, {
border-top: none ;
border-left: none ;
border-right: none;
border-bottom: 2px solid #ddd;
}
How can I override the css styles?
In addition, is there anywhere to make the above css more concise? For one I would like to be able to combine [role=tab] and [role=tablist] into a single selector.
EDIT
The html markup of the tab
You have a syntax error in your CSS: the last comma in .react-tabs [role=tablist]:focus, /* <-- */ must be removed.
Demo
.react-tabs {
height: 20px;
}
.react-tabs [role=tab] { background: orange; } /* correct version */
.react-tabs [role=tab], { background: blue; } /* won't work */
<div class="react-tabs">
<div class="something" role="tab">Want to change this guy</div>
</div>
You must override all default properties of :focus and :focus:after.
This code below works for me:
.react-tabs [role=tab]:focus {
box-shadow: none;
border-color: none;
border-bottom-color: $yourColor;
outline: none;
}
.react-tabs [role=tab]:focus:after{
content: "";
position: absolute;
height: 5px;
left: -4px;
right: -4px;
bottom: -5px;
background: transparent;
}
Provide outline: 0 to your code.
outline by default appears over many form elements like input & button, when they are active or focussed. So you have to manually make it disappear.
Outlines differ from borders in the following ways:
Outlines do not take up space, they are drawn above the content.
Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. But e.g. Opera draws a non-rectangular shape around
the construct.
Refer code:
.react-tabs [role=tab],
.react-tabs [role=tablist],
.react-tabs [role=tab]:focus,
.react-tabs [role=tablist]:focus, {
border-top: none ;
border-left: none ;
border-right: none;
border-bottom: 2px solid #ddd;
outline: 0 !important;
}

Firefox ignoring borders in user style, unless I don't specify all four sides

I'm trying to write a user style for this page using Stylish in Firefox 27.0.1. The stylesheet I have so far is:
#-moz-document domain("www.hitbox.tv") {
/***** Change stream area colours *****/
.meta, /* title and tabs */
.userContent.cf /* share buttons */
{
background: none !important; /* remove white gradient */
background-color: #000 !important;
color: #AAA !important;
border-bottom: none !important; /* remove white separator */
}
.title, /* stream title */
.hover, /* tabs and buttons below title */
.profile * /* profile text */
{
color: #AAA !important;
}
.btns .active /* currently selected tab */
{
color: #484 !important;
}
button {
background: #000 !important;
color: #AAA !important;
border-top: 2px #AAA solid !important;
border-right: 2px #AAA solid !important;
border-bottom: 2px #888 solid !important;
border-left: 2px #888 solid !important;
}
/***** Push video down the page *****/
.player {
padding-top: 100px !important;
}
/***** Make video occupy all available space *****/
#player {
width: 100% !important;
/* height: 100% !important; */
}
} /* #-moz-document */
The issue is with the very last rule, that should affect the "follow" button below the stream title. (In my case it's a "following" button, but the rule should affect it either way.) None of the styles applied to it are having any effect. However if I comment out any one of the "border" styles, the other s(including "background" and "color") suddenly work. Specifying simply border: 2px #AAA solid !important; also causes the entire rule to be ignored. What's going on here?

Applying border to a checkbox in Chrome

I have a lot of forms on my website with, of course, many of the fields in them being required. If required field is left empty, it is assigned an 'error' class and I'm trying to circle the field in red regardless whether it is a text field, drop down menu or a checkbox.
I have the following code in my css file:
.error input, .error select, .error textarea {
border-style: solid;
border-color: #c00;
border-width: 2px;
}
Now strangely enough that works well in IE but in Chrome the checkboxes are not circled in red although I can see that the CSS is applied to them when inspecting the element.
And this might be irrelevant at the css code above is active but I do have something else in my css file:
input[type=checkbox] {
background:transparent;
border:0;
margin-top: 2px;
}
And that is used so that the checkboxes are displayed correctly in IE8 and less.
Any ideas how I can visualize the red border in Chrome?
EDIT:
Here's a jsfiddle:
http://jsfiddle.net/PCD6f/3/
Just do it like so (your selectors were wrong: .error input, .error select, .error textarea):
input[type=checkbox] {
outline: 2px solid #F00;
}
Here's the jsFiddle
Specifically for a checkbox use outline: 2px solid #F00;, BUT keep in mind that the border will still be visible. Styling input fields to look them well across multiple browsers is tricky and unreliable.
For a completely custom styled checkbox, see this jsFiddle from this Gist.
EDIT Play with: outline-offset: 10px;
Check Box, and Radio Button CSS Styling Border without any image or content. Just pure css.
JSFiddle Link here
input[type="radio"]:checked:before {
display: block;
height: 0.4em;
width: 0.4em;
position: relative;
left: 0.4em;
top: 0.4em;
background: #fff;
border-radius: 100%;
content: '';
}
/* checkbox checked */
input[type="checkbox"]:checked:before {
content: '';
display: block;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}
Works for me.only outline doesn't work.
input[type=checkbox].has-error{
outline: 1px solid red !important;
}

Resources