Can't omit outline with combo box - css

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;
}

Related

How do I apply a border to a <a> link?

I'm trying to add a red 2px border when a customer hovers over one of my three 'service widgets' on my website https://tomnicholls.co on the homepage. I can't figure out where to apply the code as I can't find a container? I can't even seem to add a regular border never mind a border on :hover.
I have tried applying code to .col-link & .col-link .custom-link and have also tried giving the column a class and applying code to that as well as giving the actual content block a class (btn-widget) and applying css to that but nothing seems to be working.
.btn-widget {
width: 328px !important;
margin-left: 72px !important;
border-left: 2px !important;
border-right: 2px !important;
border-top: 2px !important;
border-bottom: 2px !important;
border-color: #c92228 !important;
z-index: 1000;
color: #000000 !important;
}
I would like to solve the problem and have a border on hover
It worked with this :
a.col-link.custom-link:hover {
border: 2px solid red;
}

CSS reverting to defined style

In my app a frequently used HTML component is styles as:
.box {
min-width: 100px;
padding: 20px 10px;
}
there are a lot of these (100+) and their border is styled without bottom and different by color:
.box:nth-child(1) {
border: 2px solid red;
border-bottom: none;
}
.box:nth-child(2) {
border: 2px solid green;
border-bottom: none;
}
.box:nth-child(3) {
border: 2px solid blue;
border-bottom: none;
}
.box:nth-child(4) {
border: 2px solid yellow;
border-bottom: none;
}
...
There's a page in the app where all these boxes need to be displayed with full border (including the bottom border) - what is needed is to remove the 'boder-bottom:none' definitions. So in this specific page I've tried to override the .box definition:
.box {
border-bottom: initial; /* tried unset as well...*/
}
But this still results with no border. Is there a way to specify a style so all the .box accepts the full border - or I have to redefine all of the bottom borders?
-Dan
Why not define another class for that component and define border-bottom for that class and put it as !important
.another_class{
border-bottom: 1px solid #efefef !important;
}
border-bottom: initial; won't give you a border.
Set the second definition to border-bottom: 1px solid #efefef;

Remove leaflet zoom control outline(?)

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/

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?

CSS outline is different for input and input:focus

I'm having a problem with an box and its associated css outline style. When the box is focused, it should have a blue outline (working). On form validation, if there is a problem, the .error class is added changing the outline and background color red (not working)
On focus I have a style:
input, select {
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
}
input:focus{
background: #EFF5FF;
color: black;
outline: solid 2px #73A6FF;
}
For the error:
input.error:focus, .error {
outline: 2px solid red;
background: rgb(255,240,240);
}
The problem is that the outline without focus is on the outside of the input box while the outline on focus is on the inside of the box so the element jumps as you click on it (CHROME).
Please see this image:
First is on focus, second is no focus with error, third is error with focus. Notice how the no focus causes the border to expand outside the object.
Is there a good way to fix this?
Try setting outline-offset explicitly. Any valid (see Syntax section) value should do, but for moving outline inside the element a negative one can be applied, for example:
JSFiddle
input {
background: #EFF5FF;
outline: solid 2px #73A6FF;
outline-offset: -2px;
}
input.error {
outline: 2px solid red;
background: rgb(255,240,240);
}
Although you are asking about Chrome, be aware that outline-offset property is not supported in IE.
Change every outline to border and give the basic input selector a transparent border (could be grey too for example) for it not to push the second input around et Voilá :) (Updated JSFiddle)
input{
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
border: solid 2px transparent;
}
input:focus{
background: #EFF5FF;
color: black;
border: solid 2px #73A6FF;
}
input.error:focus{
border: 2px solid red;
background: rgb(255,240,240);
}
.error {
border: 2px solid red;
background: rgb(255,240,240);
}

Resources