I have style HTML 5 progress tag. And removed default styles however I am not sure why there is small gap coming in between border and filled area in progress. Please see below screenshot.
Please help me to remove 1px gap between filled dark blue area and red border.
Stackblitz URL: https://stackblitz.com/edit/angular-ivy-qgwxn1?
use height 100% to fill the gap, and border to box-shadow method to completely remove any remaining spaces,
progress[value] {
flex-grow: 1;
margin-right: 0.5rem;
/* Reset the default appearance */
-webkit-appearance: none;
appearance: none;
height: 100%;
border-radius: 5px;
overflow: hidden;
box-shadow: 0 0 0 1px red;
/* border: 1px solid red; */
}
Related
Hey is it possible to make scrollbar "hidden" i dont wanna use overflow-y: hidden
just something like background: transparent or something like that
Here you will find a description how to hide the scrollbar just with CSS.
And here in the second example you will find a solution how to hide the scrollbar within a div for example.
The trick in the second example is to define a wider div container that the surrounding one.
.hidden-scrollbar .inner {
height:200px;
overflow:auto;
margin:15px -300px 15px 15px;
padding-right:300px;
}
Just play arround with the values of margin and padding.
There is a CSS rule that can hide scrollbars in Webkit-based browsers (Chrome and Safari). That rule is:
.element::-webkit-scrollbar { width: 0 !important }
u can change width / background-color and other properties .
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
this css code might work
In Webkit browsers:
::-webkit-scrollbar {
display: none;
}
So I have a field that is supposed to have a black outline. Like this
Where the 237 is. But here's what I have
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
outline: 3px solid black;
}
For some reason when I select the field it gets smaller. And on initial load, there's kind of like an outline around it. A grayish one. You could call it a shadow Here's a demo. Ideas?
Use border instead of outline to remove the "shadow":
.r{
height: 40px;
font-size: 30px;
width: 100px;
font-family: 'proxima_novalight';
outline: none;
background: none;
border: 3px solid black;
}
JSBin: http://jsbin.com/cuwurowu/2/edit
The “shadow” is the default border of the input element. To remove it, add
.r { border: none }
(but note that this affects the totals dimensions of the element, which may matter in pixel-exact layout).
The shrinking effect in Chrome (does not seem to happen in Firefox or IE) is apparently caused by a browser default style sheet that sets outline-offset: -2px on the element when it is focused. The outline-offset sets the distance between an outline and the outer edfes of the element, so a negative value shrinks the outline. To fix this, add
.r { outline-offset: 0 }
I've created the following fiddle with a sample table where I need to add specific style to each table header.
fiddle
The following pic shows a sample of the style I need to add. How can I achieve this styling using only the th tag?
sample style
To make arrows use :after filter with css3 triangles.
To make frame inside th use outline.
jsFiddle (Forked from your fiddle and marked with comments what was changed).
Briefly:
/* Makes triangle */
.table-header th:after {
content: " ";
/* just adjusting position */
margin-left: 5px;
margin-right: 3px;
margin-bottom: 4px;
display: inline-block;
/* reference to http://css-tricks.com/snippets/css/css-triangle/ on how to make triangles */
/* triangle */
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #ccc;
/* /triangle */
}
/* Adds outline for active element (<th class="active">) */
.table-header th.active {
outline: 1px solid #ccc;
outline-offset: -9px;
}
/* Forbid header to do word-wrapping, or it will look ugly */
.table-header th {
/* ... some code that was here ... */
white-space: nowrap;
}
You may customize colors, margins and outline to your hearts content.
UPDATED: Edited link to fiddle to third revision.
I have this issue with <input type="text">where I see some extra border in top and left of the input box.
I have this CSS code -
#add{
width: 60%;
height: 25px;
margin: 0 auto;
border: auto;
border-radius: 10px;
}
I am attaching the screenshot from chrome. Firefox shows the same thing.
Try
#add{
width: 60%;
height: 25px;
margin: 0 auto;
border: none; /* <-- This thing here */
border:solid 1px #ccc;
border-radius: 10px;
}
By setting it to border:none the default css of the text field will be gone and your ready to style it for yourself.
Demo
#add {
width: 60%;
height: 25px;
margin: 0 auto;
border: 1px solid black;
border-radius: 10px;
}
Border auto is doing that for you. So have your own defined border style.
I noticed in Chrome that the user agent style that causes this specific look is border-style: inset; You can see it in the snippet below. Chrome is handy about indicating the user agent styles. I found two ways to fix this appearance.
Simply set border: 1px solid black; and you notice that the border will lose that inset look.
If you want extra caution, you can set border-style: none; This will cause the border to disappear altogether. You can then set the border as you wish.
I would test any of these solutions across different browsers.
Chrome User Agent Stylesheet:
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset; /* This rule adds the inset border */
border-color: initial;
border-image: initial;
}
By setting the border: none; will override/nullify the default input css of the text field and then you can add your own custom css to beautify the input text element like so:
border: none; /*removes the default css*/
border: 1px solid black; /*your custom css*/
border-radius: 10px; /*your-border radius*/
However the above method is unnecessarily tedious whereas you could achieve the same result in just a single line with:
border-radius: 10px !important; /*this simply does the trick!!!*/
**Note:** The !important property in CSS is used to provide more weight (importance)
than normal property. It means that “this is important”, ignore all the subsequent
rules
<input type="text" style="border-radius: 25px;" /> 100% works
Try this thing
I have borders already set up with CSS for the .message class.
However I would like to make it so only the top border is visible with an inline style. Can someone tell me how I can do this.
You can set all the borders up using the shorthand notation, but then override the one border you want to present differently, for example:
.message {
border: 2px solid #f90;
border-top: 2px solid transparent;
}
Or, for brevity, you can simply override one property of that border (color, width or style):
.message {
border: 2px solid #f90;
border-top-width: 0; /* or whatever */
border-top-style: none; /* or whatever */
border-top-color: transparent; /* again, or whatever... */
}
If you use shorthand, you must set all of the widths, so you won't be able to use the width applied from the .message class.
.test { border-width: 1px 0 0 0 } /* top right bottom left */