is there any way to hide the scrollbar track but not the thumb? It should look like this:
Its currently looking like this:
This is the actual css for the scrollbar:
*::-webkit-scrollbar {
width: 10px;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--dark-blue) var(--custom-white);
}
*::-webkit-scrollbar-track {
background-color: var(--custom-white);
}
*::-webkit-scrollbar-thumb {
background-color: var(--dark-blue) ;
border-radius: 20px;
border: 3px solid var(--custom-white);
}
FINAL CODE:
*::-webkit-scrollbar {
background-color: transparent;
width: 15px;
}
*::-webkit-scrollbar-track {
background-color: transparent;
}
*::-webkit-scrollbar-thumb {
border-radius: 20px;
border: 4px solid transparent;
background-color: rgba(0,0,0,0.2);
background-clip: content-box;
}
Just add overflow: overlay; to the body tag instead of overflow: auto.
both work the same but with OVERLAY your scrollbar will be on top of content just as you want.
Worked for me.
You can just add the background-color property to your ::-webkit-scrollbar and set it to transparent.
::-webkit-scrollbar {
background-color: transparent;
width: 10px;
}
* {
scrollbar-width: thin;
scrollbar-color: var(--dark-blue) var(--custom-white);
}
*::-webkit-scrollbar-track {
background-color: var(--custom-white);
}
*::-webkit-scrollbar-thumb {
background-color: var(--dark-blue) ;
border-radius: 20px;
border: 3px solid var(--custom-white);
}
Alright, since i tried everything with CSS and nothing worked, i figured it would be best to use an external package that helped me achieve this very very easily.
I used this library which is suuper super easy to set up and use. All i had to do was install it and use the component. In the wiki they have an example of use and its very noob-friendly and customizable.
*::-webkit-scrollbar {
border: none;
background-color: transparent;
} /* webkit browsers(safari, chrome) */
*{
scrollbar-color: #404040b3 transparent; /*firefox*/
}
This is what worked for me finally.
Code
.topnav {
width: 50%;
display: inline-block;
background-color: black;
overflow: hidden;
}
.topnav a {
box-sizing: border-box;
color: white;
display: inline-block;
padding: 16px;
text-decoration: none;
font-size: 17px;
margin: 6px;
}
.topnav a:hover {
background-color: blue;
color: white;
}
.topnav a.active {
background-color: blue;
color: white;
}
.searchbar {
width: 50%;
float: right;
display: inline-block;
background-color: black;
overflow: hidden;
}
.searchbar input[type=text] {
float: right;
width: 80%;
box-sizing: border-box;
color: black;
display: inline-block;
padding: 15.5px;
outline: none;
margin: 6px;
border: 3px solid transparent;
transition: 0.1s;
}
.searchbar input[type=text]:hover {
border: 3px solid blue;
}
<!DOCTYPE>
<html>
<head>
</head>
<body>
<div class='topnav'>
<a href='#abcdefg'>abcdefg</a>
</div>
<div class='searchbar'>
<form>
<input type='text' placeholder='Search here'>
</form>
</div>
</body>
</html>
As the title suggests, in order for both <div class = 'topnav'> and <div class = 'searchbar'> to have the same height, I can set <div class = 'searchbar'> padding to 15.5 pixels each.
padding: 15.5px;
Because of that, I'm having trouble understanding why. That is, I managed to get both<div> height to the same size by guessing the right padding, not something I want to be doing. Therefore, I'm asking for a systematic way to know how much padding I need.
I don't know if that will be good for you about height exactness... But certainly will easier to tweak. I used a CSS grid an just an additional div as a wrapper.
.topNavContainer {
display: grid;
grid-template-columns: 60% 40%;
grid-template-rows: 53px;
grid-gap: 6px;
align-items: center;
justify-content: space-between;
background-color: black;
box-sizing: border-box;
overflow: hidden;
border: 6px solid black;
}
.topnav a {
padding: 16px 12px;
color: white;
text-decoration: none;
font-size: 17px;
}
.topnav a.active,
.topnav a:hover {
background-color: blue;
color: white;
}
.searchbar input[type="text"] {
width: 100%;
padding: 16px 0;
color: black;
outline: none;
border: 3px solid transparent;
}
.searchbar input[type="text"]:hover {
border: 3px solid blue;
}
<div class="topNavContainer">
<div class='topnav'>
<a href='#abcdefg'>abcdefg</a>
</div>
<div class='searchbar'>
<form>
<input type='text' placeholder='Search here'>
</form>
</div>
</div>
So I think you're missing that border-box does not include margins (which might have thrown off your calculations). So if you look at the dev tools and remove the 15.5px padding style on you input tag, then scroll to the bottom, you'll see this nice looking thing:
Yes there is still padding on it, this is from another style (ignore it). Your counterpart div happens to have a height of 64px (on my browser at least), so let's subtract from 64 all the heights (except for the padding, since we will be replacing that) that the dev tools are showing:
64 - 15 - 3 - 3 - 6 - 6 = 31px <- the remaining space
31px / 2 = 15.5px
However, calculations are not ideal either. Specify your heights directly with pixels or percentages, or consider the other answers here.
I have a simple search bar which contain a div and inside that div there is -
input element for text and search button.
<div className="search-box">
<input
type="text"
placeholder={PLACEHOLDER.search}
value={this.state.search}
onChange={this.updateSearchBar}
onKeyUp={this.keyPress}
/>
<IconButton className="search-icon-button" onClick={this.handleSearchIcon}>
<SearchIcon />
</IconButton>
</div>
Css file -
.search-box {
border: 1px solid black;
width: 200px;
height: 30px;
display: flex;
min-width: 180px;
margin-right: 2%;
padding-left: 1px;}
.search-box input{
width: 100%;
color: black;
border: none;
outline: none;
}
.search-icon-button {
color: #FF7D50 !important;
padding: 3px 0px 0px 7px !important;
}
IconButton and SearchIcon are material ui component.
Below I am attaching the screen shot of chrome and mozilla.
Chrome -
Mozilla -
Could you please help I have used width: webkit-mozilla but I want this to work fine on both.
Give browser specific css.You can give padding according to set search icon.I hope it will helps you.
#-moz-document url-prefix(){
.search-icon-button {
color: #FF7D50 !important;
padding: 3px 0px 0px 4px !important;
}
}
A problem that seems to pop up again and again in my projects is styling form elements and links to have the same height.
Here's an simple example (fiddle):
HTML:
<select><option>one</option></select>
<input type="text">
<button>foo</button>
test
CSS:
select,
input,
button,
a {
padding: 0.5rem;
margin: 0.25rem;
border: 1px solid red;
}
All elements receive the exact same styling with a padding, a margin and a border. But they all differ slightly in height and I don't really understand why.
Can someone
explain where the difference comes from? Chrome inspector tells me that the actual inner element of each has different sizes - shouldn't it be the same?
tell me what minimal changes I need to do to my CSS to achieve what I want without styling each of the elements slightly different? My goal is to pick the padding, margin and border sizes freely (using variables) and still have consistent heights.
Updated fiddle with solution
The minimal version:
You'll need to add the additional rules like below:
select,
input,
button,
a {
padding: 0.5rem;
margin: 0.25rem;
border: 1px solid red;
display: inline-block; /*new*/
font: inherit; /*new*/
}
But that will still not guarantee they receive the same height for certain input types in certain browsers. You can also reset the appearance but I would not recommend to do it globally, unless it's required by design.
-webkit-appearance: none;
appearance: none;
The non-minimal version:
*,
*:before,
*:after {
box-sizing: border-box;
}
::-moz-focus-inner {
border-style: none;
padding: 0;
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
::-webkit-search-cancel-button,
::-webkit-search-decoration {
-webkit-appearance: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 1rem;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
[type="checkbox"],
[type="radio"] {
padding: 0;
}
[type="search"] {
outline-offset: -2px;
-webkit-appearance: textfield;
}
[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea,
button,
[type="button"],
[type="reset"],
[type="submit"] {
display: inline-block;
vertical-align: middle;
height: calc(2.25rem + 2px);
color: #333;
border: 1px solid #ccc;
border-radius: 3px;
}
[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea {
max-width: 100%;
padding: 0.5rem;
background-clip: padding-box;
background-color: #fff;
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1);
}
[type="color"]:focus,
[type="date"]:focus,
[type="datetime"]:focus,
[type="datetime-local"]:focus,
[type="email"]:focus,
[type="month"]:focus,
[type="number"]:focus,
[type="password"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="text"]:focus,
[type="time"]:focus,
[type="url"]:focus,
[type="week"]:focus,
select:focus,
textarea:focus {
border-color: rgb(30, 144, 255);
box-shadow: 0 0 2px rgba(30, 144, 255, 0.8);
outline: 0;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
padding: 0.5rem 0.75rem;
background-color: #f7f7f7;
box-shadow: 0 1px 0 #ccc;
cursor: pointer;
-webkit-appearance: button;
}
button:hover,
[type="button"]:hover,
[type="reset"]:hover,
[type="submit"]:hover {
background-color: #fafafa;
border-color: #999;
}
button:focus,
[type="button"]:focus,
[type="reset"]:focus,
[type="submit"]:focus {
border-color: rgb(30, 144, 255);
box-shadow: 0 0 2px rgba(30, 144, 255, 0.8);
outline: 0;
}
button:active,
[type="button"]:active,
[type="reset"]:active,
[type="submit"]:active {
background-color: #eee;
border-color: #999;
box-shadow: inset 0 2px 5px -3px rgba(0, 0, 0, 0.5);
}
button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
background-color: #f7f7f7;
color: #a0a5aa;
border-color: #ddd;
box-shadow: none;
text-shadow: 0 1px 0 #fff;
cursor: default;
}
select {
-moz-appearance: textfield;
-webkit-appearance: textfield;
}
select::-ms-expand {
display: none;
}
select[multiple],
select[size]:not([size="1"]) {
height: auto;
padding: 0;
}
select[multiple] option,
select[size]:not([size="1"]) option {
padding: 0.5rem;
}
select:not([multiple]):not([size]),
select:not([multiple])[size="1"] {
padding-right: 2rem;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3C/svg%3E") right 0.25rem center no-repeat;
}
textarea {
height: auto;
overflow: auto;
}
<select>
<option>one</option>
</select>
<input type="text" placeholder="text">
<button>foo</button>
Most of the code above doesn't answer the question directly or even unrelated, and it doesn't include the <a> tag. But in a real web application, it's likely end up having more or less the same amount of CSS.
(Tested with Chrome only)
explain where the difference comes from?
It comes from user agent stylesheet which apply different style as default for each tag.
Those styles change according to the browser.
tell me what minimal changes I need to do to my CSS
input, select and button tags have a default font size which doesn't inherit from your body font-size declaration. Set their font-size value to inherit.
input, select, button {
font-size: inherit;
}
a tag is inline by default. Set its value to inline-block.
Also, set its box-sizing value to border-box.
a {
display: inline-block;
box-sizing: border-box;
}
select has a biggest height content because of its the dropdown icon.
You could fix it by removing its default appearance, but I wouldn't recommend it.
select {
-webkit-appearance: none;
}
Demo
body {
font-size: 16px
}
select,
input,
button,
a {
padding: 0.5rem;
margin: 0.25rem;
border: 1px solid red;
vertical-align: top;
}
input,
select,
button {
font-size: inherit;
}
a {
display: inline-block;
box-sizing: border-box;
}
/* Bad practice */
select {
-webkit-appearance: none;
}
<select>
<option>Select</option>
</select>
<input type="text" value="Input">
<button>Button</button>
Link
An other solution would be to use height + line-height properties for centering your elements and give them the same height.
body {
font-size: 16px
}
select,
input,
button,
a {
height: 40px;
line-height: 40px;
display: inline-block;
vertical-align: top;
margin: 0.25rem;
padding: 0 0.5rem;
border: 1px solid red;
font-size: inherit;
box-sizing: border-box;
}
<select>
<option>Select</option>
</select>
<input type="text" value="Input">
<button>Button</button>
Link
1. From what I understand, the CSS specification for form elements is very loose, so it can be difficult to apply styles at the same time to many different kinds of form elements. Because of this, these different elements all apply your style rules differently.
2. I was able to make the elements all have the same height with one more CSS rule inside the second set of selectors for your form elements:
body {
font-size: 16px;
}
select,
input,
button,
a {
padding: 0.5rem;
margin: 0.25rem;
border: 1px solid red;
font: 1rem "Helvetica", sans-serif;
}
You could change this font to whatever you like and it should still work. What this style primarily accomplishes is to "normalize" everything, especially the "a" element. The "a" element appears to want to keep its initial font-family and some form of its initial font-size. So, with the font style, you can make sure every element is inheriting the body's font size with the 1rem and that each element has a consistent font.
I have a container div and it has a hidden button inside it and it appears only when focusing on the container div. I want to make the button visible when focused (I want to make it focusable). Here's a fiddle
HTML:
<div class="ads" tabindex="0">
<button class="close" tabindex="0">X</button>
</div>
CSS:
.ads{
position: relative;
display: inline-block;
border-radius: 0.5625rem;
border-style: solid;
border-width: 0.03125rem;
border-color: lightgrey;
background-color: #ffffff;
width: 100%;
height: 80px;
}
.close{
display: none;
padding: 0;
background: transparent;
border: none;
margin-top: 0.5rem;
margin-right: 0.5rem;
float: right;
width: 0.5rem;
height: 0.5rem;
background-image: url('delete.png');
background-size: 100% 100%;
}
div.ads:focus{
background-color: #ebeded;
}
div.ads:focus .close{
display:inline-block;
}
button.close:focus{
display:inline-block;
}
How can I achieve that?
Thank you.
At any given moment of time only one element can be in focus or none.
But your solution assumes that there are two elements matching :focus in the document at the same time.
Here is sequence of events when you press TAB on focused div:
Your div looses focus so is does not match :focus;
Button gets hidden as it has not got focus yet;
as nothing visible/focusable inside the div focus moves to something else but not to the button.
You should find other solution.
Update: possible CSS only hack is to use opacity:0 instead of display:none.
Hack here is that opacity:0 element is considered as still displayed element so focusable.
input{
display: block;
width: 100%;
}
.ads{
position: relative;
display: inline-block;
border-radius: 0.5625rem;
border-style: solid;
border-width: 0.03125rem;
border-color: lightgrey;
background-color: #ffffff;
width: 100%;
height: 80px;
}
.close{
opacity: 0;
padding: 0;
background: transparent;
border: none;
margin-top: 0.5rem;
margin-right: 0.5rem;
float: right;
width: 0.5rem;
height: 0.5rem;
background-image: url('delete.png');
background-size: 100% 100%;
}
div.ads:focus{
background-color: #ebeded;
}
div.ads:focus .close{
opacity: 1.0;
}
button.close:focus{
opacity: 1.0;
}
<input type="text" placeholder="press on me and tab two times">
<div class="ads" tabindex="0">
<button class="close" tabindex="0">X</button>
</div>
<p>
by the second tab you should see focused button ,but you don't
</p>