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;
}
Related
I am styling input[type=range] using CSS, and done with thumb and track.
All of three(-ms, -moz, -webkit) browser have proper prefix.
But, I don't know what vender prefix is suit to style progress on Webkit browser, such as Chrome.
On Internet Explorer and Microsoft Edge, -ms-fill-lower works great.
On Firefox, using -moz-range-progress solved the problem.
input[type=range] {
/*removes default webkit styles*/
-webkit-appearance: none;
/*fix for FF unable to apply focus style bug */
border: 1px solid white;
/*required for proper track sizing in FF*/
width: 350px;
}
/* Webkit, Chrome & Safari */
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
margin-top: -7px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ddd;
}
/* moz://a Firefox */
input[type=range]::-moz-range-track {
/* width: 150px;
height: 5px; */
background: #ccc;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
}
input[type=range]::-moz-range-progress {
background: #33ccff;
border-radius: 10px;
height: 5px;
}
/*hide the outline behind the border*/
input[type=range]:-moz-focusring{
outline: 1px solid white;
outline-offset: -1px;
}
/* Microsoft */
input[type=range]::-ms-track {
height: 2px;
/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;
/*leave room for the larger thumb to overflow with a transparent border */
border-color: transparent;
border-width: 6px 0;
/*remove default tick marks*/
color: transparent;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #004d66;
margin-top: 1px;
}
input[type=range]::-ms-fill-lower {
background: #33ccff;
border-radius: 10px;
height: 5px;
}
input[type=range]::-ms-fill-upper {
background: #ccc;
border-radius: 10px;
}
input[type=range]:focus::-ms-fill-lower {
background: #44ddff;
}
input[type=range]:focus::-ms-fill-upper {
background: #ddd;
}
<input type="range" />
This example will work as I expected on Microsoft Edge, moz://a Firefox, and Internet Explorer, but looks differently on Chrome.
I already read Styling input range for webkit with pure CSS , and tried on mine,
but it works strangely when multiple input[type=range]s are on one document.
So, the question is,
Is there any proper vender prefix for styling track that thumb is already passed, only using CSS?
To the best of my knowledge, this isn't possible. Below is a snippet from Chrome showing the Shadow DOM elements for <input type="range" />:
<input type="range">
#shadow-root (user-agent)
<div style="-webkit-appearance:inherit">
<div pseudo="-webkit-slider-runnable-track" id="track">
<div id="thumb">
</div>
</div>
</div>
</input>
In general, you might want to take a look at range.css, it's a cross-browser code generator for custom range sliders. However, it doesn't provide a way to style the ::-moz-range-progress region. Other example's I've found, including this Codepen snippet, use the deprecated and no-longer-functional deep shadow-piercing selector. For a fully cross-browser solution, you'll have to make your own element.
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;
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/
This may be a dumb question, but this thing is bothering me more than it should. It's a known fact that Google Chrome outlines <input> elements by default when they're focused. I don't like its default appearance so I implemented my own outline for the focus selector on my CSS:
#LoginForm input:focus {
outline: #1F377A dotted 1px;
}
The original Chrome's implementation looks as follows (notice the blue outline around the text input):
But by using my own css implementation it looks like this:
Why does my outline appears inside the text input and not around as chrome's default outline does?
These are the relevant css lines for my input element:
#LoginForm input {
display: blocK;
float: left;
height: 24px;
border: none;
font-family: inherit;
margin: 0px 0px 0px 4px;
}
#LoginForm input:focus {
outline: red solid 1px;
}
#LoginForm .textInput {
padding: 0px 2px 0px 2px;
font-size: 9pt;
}
The only thing that let's me change between my own and chrome's outline is just commenting the input:focus selector and nothing more. I don't want to use borders, since the actually add to the size of the element and I don't want that.
If you check the chrome dev tools, the outline is not a simple 1px outline but shows up as
:focus {
outline-color: -webkit-focus-ring-color;
outline-style: auto;
outline-width: 5px;
}
input:focus, textarea:focus, keygen:focus, select:focus {
outline-offset: -2px;
}
The outline-offset is what you where looking for. To have a red outline simply add this to your style sheet:
:focus {
outline-color: #f00;
}
If you also want it on other elements use:
.element:focus {
outline-color: #f00;
outline-style: auto;
outline-width: 5px;
outline-offset: -2px;
}
Here's a JSFiddle to play with.
EDIT:
To have the outline exactly on the border (and not inside of it) you have to set
outline-offset: 0;
to override the chrome user agent styles.
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;
}