This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
How do I move my more button from being aligned in the middle of the div, to being aligned to the top of the div (where the x mark is)?
Here is my jsfiddle: https://jsfiddle.net/z6syuLfv/.
My code is as follows:
.course-sidebar-audio-item-container {
display: flex;
align-items: center;
width: 100%;
}
.course-sidebar-audio-item-icon-container {
align-items: center;
align-self: flex-start;
display: flex;
flex-shrink: 0;
height: 56px;
justify-content: center;
width: 56px;
background-color: rgba(80, 102, 144, 0.1);
color: #506690;
border-radius: 5px;
}
.course-sidebar-audio-item-icon-container:hover {
background-color: rgba(80, 102, 144, 0.15);
transition: background-color 0.15s ease-in-out;
cursor: pointer;
}
.course-sidebar-audio-item-icon {
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
vertical-align: text-bottom;
box-sizing: border-box;
}
.course-sidebar-audio-item-details {
-webkit-font-smoothing: antialiased;
font-weight: 400;
line-height: 1.6;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
overflow: hidden;
padding-left: 12px;
}
.course-sidebar-audio-item-title {
line-height: 1.6;
font-size: 16px;
}
.course-sidebar-audio-item-duration {
color: #506690;
font-size: 14px;
}
.course-sidebar-audio-item-toolbar-menu-container {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.6;
}
.course-sidebar-audio-item-toolbar-menu {
font-size: 1.4rem;
font-weight: 400;
cursor: pointer;
display: inline-flex;
line-height: 16px;
top: 4px;
}
.course-sidebar-audio-item-toolbar-menu-button {
font-size: 1rem;
display: inline-block;
color: #506690;
height: 16px;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
outline: none;
border-radius: 8px;
cursor: pointer;
border: 0;
margin: 0;
background-color: rgba(80, 102, 144, 0.1);
}
.course-sidebar-audio-item-toolbar-menu-button:hover {
background-color: rgba(80, 102, 144, 0.15);
transition: opacity 0.15s ease-in-out;
}
.course-sidebar-audio-item-toolbar-menu-icon > svg {
cursor: pointer;
display: inline-block;
box-sizing: border-box;
width: 16px;
height: 16px;
margin-top: -1px;
vertical-align: top;
}
.sidebar-step-toolbar-container {
transition: opacity 150ms ease-in-out 0s;
opacity: 1;
position: absolute;
will-change: transform;
z-index: 10;
width: 150px;
margin-top: 85px;
right: 24px;
}
.sidebar-step-toolbar-container-border {
padding: 0;
border-radius: 4px;
margin: 8px 0;
background-color: #fff;
box-shadow: 0 0 0 1px rgba(14, 19, 24, 0.07), 0 2px 12px rgba(14, 19, 24, 0.2);
}
.sidebar-step-toolbar-button-container {
padding: 16px;
max-height: 80vh;
overflow-y: auto;
z-index: 10;
}
.sidebar-step-toolbar-button-row {
display: grid;
}
.sidebar-step-toolbar-button {
border-radius: 4px;
background: transparent;
border: 0;
cursor: pointer;
padding: 0 0.5rem;
margin: 0.25rem 0;
flex: 1 0 50%;
width: 7.5rem;
outline: none;
text-decoration: none;
height: 40px;
transition: background-color 0.1s linear;
font-weight: 400;
line-height: 1.6;
font-size: 0.9rem;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
.sidebar-step-toolbar-button-content {
align-items: center;
display: flex;
height: 100%;
line-height: 1.6;
min-width: 0;
cursor: pointer;
}
.sidebar-step-toolbar-button:hover {
background-color: #edf0f2 !important;
}
<div class="course-sidebar-audio-item">
<div class="course-sidebar-audio-item-container">
<div class="course-sidebar-audio-item-icon-container">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.248 5.35c-.138 0-.75.336-.75.75v8.91a3.25 3.25 0 1 0 1.5 2.74c0-.114.011.061 0-.05.011-.052 0-.395 0-.45V6.85l9.997-2v7.16a3.25 3.25 0 1 0 1.5 2.74c0-.114.011.061 0-.05.011-.052 0-.395 0-.45l-.018-10.4c0-.414-.318-.85-.732-.85L8.248 5.35zm-.75 12.4a1.75 1.75 0 1 1-3.499 0 1.75 1.75 0 0 1 3.5 0zm11.497-3a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0z" fill="#506690"></path>
</svg>
</div>
<div class="course-sidebar-audio-item-details">
<div class="course-sidebar-audio-item-title">testing_startup_ideas.mp3</div>
<div class="course-sidebar-audio-item-duration">6:20</div>
</div>
<div class="course-sidebar-audio-item-toolbar-menu-container">
<span class="course-sidebar-audio-item-toolbar-menu">
<button class="course-sidebar-audio-item-toolbar-menu-button">
<span class="course-sidebar-audio-item-toolbar-menu-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path
fill="#506690"
d="M3.25 9.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm4.75 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm4.75 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z"
fill-rule="evenodd"
></path>
</svg>
</span>
</button>
</span>
</div>
</div>
</div>
Add align-self: flex-start to .course-sidebar-audio-item-toolbar-menu-container:
Edit: To move the contained button even further up, also add line-height: 0;. That way the button is aligned to the top border of .course-sidebar-audio-item-toolbar-menu-container.
There are other ways which lead to the same result, this is just one of them.
.course-sidebar-audio-item-container {
display: flex;
align-items: center;
width: 100%;
}
.course-sidebar-audio-item-icon-container {
align-items: center;
align-self: flex-start;
display: flex;
flex-shrink: 0;
height: 56px;
justify-content: center;
width: 56px;
background-color: rgba(80, 102, 144, 0.1);
color: #506690;
border-radius: 5px;
}
.course-sidebar-audio-item-icon-container:hover {
background-color: rgba(80, 102, 144, 0.15);
transition: background-color 0.15s ease-in-out;
cursor: pointer;
}
.course-sidebar-audio-item-icon {
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
vertical-align: text-bottom;
box-sizing: border-box;
}
.course-sidebar-audio-item-details {
-webkit-font-smoothing: antialiased;
font-weight: 400;
line-height: 1.6;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
width: 100%;
overflow: hidden;
padding-left: 12px;
}
.course-sidebar-audio-item-title {
line-height: 1.6;
font-size: 16px;
}
.course-sidebar-audio-item-duration {
color: #506690;
font-size: 14px;
}
.course-sidebar-audio-item-toolbar-menu-container {
font-size: 1.4rem;
font-weight: 400;
line-height: 1.6;
align-self: flex-start;
line-height: 0;
}
.course-sidebar-audio-item-toolbar-menu {
font-size: 1.4rem;
font-weight: 400;
cursor: pointer;
display: inline-flex;
line-height: 16px;
top: 4px;
}
.course-sidebar-audio-item-toolbar-menu-button {
font-size: 1rem;
display: inline-block;
color: #506690;
height: 16px;
line-height: 16px;
font-weight: 700;
text-transform: uppercase;
white-space: nowrap;
outline: none;
border-radius: 8px;
cursor: pointer;
border: 0;
margin: 0;
background-color: rgba(80, 102, 144, 0.1);
}
.course-sidebar-audio-item-toolbar-menu-button:hover {
background-color: rgba(80, 102, 144, 0.15);
transition: opacity 0.15s ease-in-out;
}
.course-sidebar-audio-item-toolbar-menu-icon > svg {
cursor: pointer;
display: inline-block;
box-sizing: border-box;
width: 16px;
height: 16px;
margin-top: -1px;
vertical-align: top;
}
.sidebar-step-toolbar-container {
transition: opacity 150ms ease-in-out 0s;
opacity: 1;
position: absolute;
will-change: transform;
z-index: 10;
width: 150px;
margin-top: 85px;
right: 24px;
}
.sidebar-step-toolbar-container-border {
padding: 0;
border-radius: 4px;
margin: 8px 0;
background-color: #fff;
box-shadow: 0 0 0 1px rgba(14, 19, 24, 0.07), 0 2px 12px rgba(14, 19, 24, 0.2);
}
.sidebar-step-toolbar-button-container {
padding: 16px;
max-height: 80vh;
overflow-y: auto;
z-index: 10;
}
.sidebar-step-toolbar-button-row {
display: grid;
}
.sidebar-step-toolbar-button {
border-radius: 4px;
background: transparent;
border: 0;
cursor: pointer;
padding: 0 0.5rem;
margin: 0.25rem 0;
flex: 1 0 50%;
width: 7.5rem;
outline: none;
text-decoration: none;
height: 40px;
transition: background-color 0.1s linear;
font-weight: 400;
line-height: 1.6;
font-size: 0.9rem;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
.sidebar-step-toolbar-button-content {
align-items: center;
display: flex;
height: 100%;
line-height: 1.6;
min-width: 0;
cursor: pointer;
}
.sidebar-step-toolbar-button:hover {
background-color: #edf0f2 !important;
}
<div class="course-sidebar-audio-item">
<div class="course-sidebar-audio-item-container">
<div class="course-sidebar-audio-item-icon-container">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.248 5.35c-.138 0-.75.336-.75.75v8.91a3.25 3.25 0 1 0 1.5 2.74c0-.114.011.061 0-.05.011-.052 0-.395 0-.45V6.85l9.997-2v7.16a3.25 3.25 0 1 0 1.5 2.74c0-.114.011.061 0-.05.011-.052 0-.395 0-.45l-.018-10.4c0-.414-.318-.85-.732-.85L8.248 5.35zm-.75 12.4a1.75 1.75 0 1 1-3.499 0 1.75 1.75 0 0 1 3.5 0zm11.497-3a1.75 1.75 0 1 1-3.5 0 1.75 1.75 0 0 1 3.5 0z" fill="#506690"></path>
</svg>
</div>
<div class="course-sidebar-audio-item-details">
<div class="course-sidebar-audio-item-title">testing_startup_ideas.mp3</div>
<div class="course-sidebar-audio-item-duration">6:20</div>
</div>
<div class="course-sidebar-audio-item-toolbar-menu-container">
<span class="course-sidebar-audio-item-toolbar-menu">
<button class="course-sidebar-audio-item-toolbar-menu-button">
<span class="course-sidebar-audio-item-toolbar-menu-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path
fill="#506690"
d="M3.25 9.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm4.75 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5zm4.75 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5z"
fill-rule="evenodd"
></path>
</svg>
</span>
</button>
</span>
</div>
</div>
</div>
I'm agree with Johannes, also you can add vertical-align: top; in .course-sidebar-audio-item-toolbar-menu to position the button even upper.
Related
I have a simple settings menu and I want to position the toggle open and close button at the right position:
So far I'm here:
.base {
position: absolute;
max-width: 30em;
background-color: #fff;
padding: 1.125em 1.5em;
font-size: 1.25em;
border-radius: 1rem;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}
.base::before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 100%;
right: 1.5em;
border: 0.75rem solid transparent;
border-top: none;
border-bottom-color: #fff;
filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
}
html {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 300;
color: #192229;
background: linear-gradient(135deg, #F4F2F3, #BFC6D0);
}
html, body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
body {
padding: 0 2rem;
}
label {
font-family: "Montserrat", sans-serif;
font-size: 1.2rem;
cursor: pointer;
display: block;
margin: 1em;
}
label > input {
display: none;
}
label span {
color: #6A759B;
}
label i {
display: inline-block;
width: 64px;
height: 40px;
border-radius: 20px;
vertical-align: middle;
transition: 0.25s 0.09s;
position: relative;
background: #deeff7;
}
label i:after {
content: " ";
display: block;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
border-radius: 50%;
background: #fff;
position: absolute;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
transition: 0.15s;
}
label > input:checked + i {
background: #1094fb;
}
label > input:checked + i + span {
color: #29316b;
}
label > input:checked + i:after {
transform: translateX(25px);
}
.filter {
position: absolute;
}
.burger {
display: flex;
flex-direction: column;
filter: url(#gooeyness);
padding: 30px;
}
.rect {
background: black;
display: inline-block;
height: 32px;
margin-top: 40px;
transition: transform 500ms;
width: 200px;
}
.rect:nth-child(2) {
transition-delay: 100ms;
}
.rect:nth-child(3) {
transition-delay: 100ms;
}
.burger.active .rect:nth-child(1) {
transform: rotate(-45deg) translateX(-51px) translateY(50px);
}
.burger.active .rect:nth-child(2) {
transform: rotate(45deg);
}
.burger.active .rect:nth-child(3) {
transform: rotate(-45deg) translateX(51px) translateY(-50px);
}
.close {
position: absolute;
cursor: pointer;
transform: scale(0.1);
z-index: 2500;
}
.settings-container {
display: flex;
flex-direction: column;
width: 500px;
justify-content: center;
height: 250px;
align-items: center;
}
<div class="settings-container">
<div class="close">
<svg class="filter" version="1.1">
<defs>
<filter id="gooeyness">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="gooeyness" />
<feComposite in="SourceGraphic" in2="gooeyness" operator="atop" />
</filter>
</defs>
</svg>
<div class="burger">
<div class="rect"></div>
<div class="rect"></div>
<div class="rect"></div>
</div>
</div>
<div class="base">
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>آموزش کارت حتی در صورت پاسخ صحیح</span>
</label>
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>ضبط صدا در صورت استفاده از تشخیص گفتار</span>
</label>
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>نمایش جلوه های ویژه ی صوتی و بصری</span>
</label>
</div>
</div>
The issue is I don't know how to position the toggle button at the right place! here is where I want it to be:
Notice that here on SO you can not see the button here is a codepen for it:
https://codepen.io/pixy-dixy/pen/OJjJygg?editors=1100
So the fist issue is that your code produces an different to the one you show in your screenshot. The hamburger menu is in a different place as shown in the image below.
But your problem really stems from a few issues in your css. You can see the step by step below or just jump to the full css at the end. The first is to get it to do what your screen shot is showing you need to do this. Please not I have just uncommented out the code so you can see the changes
.close {
/*position: absolute;*/
cursor: pointer;
transform: scale(0.1);
z-index: 2500;
}
.settings-container {
/*display: flex;
flex-direction: column;*/
width: 500px;
justify-content: center;
/*height: 250px;*/
align-items: center;
}
this now produces the below
Then for reference purposes I have added a border to your settings-container to illustrate what is happening.
The code that cause this is the transform: scale(0.1) shown below and commented out.
.close {
/*position: absolute;*/
cursor: pointer;
/*transform: scale(0.1);*/
z-index: 2500;
}
This now produces this result.
Now you can change the burger menu rectangles to the correct size rather than using transform.
.rect {
background: black;
display: inline-block;
height: 5px;
margin-top: 5px;
transition: transform 500ms;
width: 30px;
}
.close {
/*position: absolute;*/
cursor: pointer;
/*transform: scale(0.1);*/
z-index: 2500;
}
This produces the below result
now you can just position the hamburger menu to right.
.close {
display: flex;
justify-content:end;
/*position: absolute;*/
cursor: pointer;
/*transform: scale(0.1);*/
z-index: 2500;
}
it will look like this
final touches add margin (red border is removed as it was only for illustrative purposes). Your filter was also causing layout issues so I have commented it out.
.burger {
margin-bottom: 20px;
margin-right: 35px;
display: flex;
flex-direction: column;
filter: url(#gooeyness);
/*padding: 30px;*/
}
full css with commented our code
.base {
position: absolute;
max-width: 30em;
background-color: #fff;
padding: 1.125em 1.5em;
font-size: 1.25em;
border-radius: 1rem;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}
.base::before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 100%;
right: 1.5em;
border: 0.75rem solid transparent;
border-top: none;
border-bottom-color: #fff;
filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
}
html {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 300;
color: #192229;
background: linear-gradient(135deg, #F4F2F3, #BFC6D0);
}
html, body {
height: 100%;
display: flex;
justify-content: center;
/*align-items: center;*/
}
body {
padding: 0 2rem;
}
label {
font-family: "Montserrat", sans-serif;
font-size: 1.2rem;
cursor: pointer;
display: block;
margin: 1em;
}
label > input {
display: none;
}
label span {
color: #6A759B;
}
label i {
display: inline-block;
width: 64px;
height: 40px;
border-radius: 20px;
vertical-align: middle;
transition: 0.25s 0.09s;
position: relative;
background: #deeff7;
}
label i:after {
content: " ";
display: block;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
border-radius: 50%;
background: #fff;
position: absolute;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
transition: 0.15s;
}
label > input:checked + i {
background: #1094fb;
}
label > input:checked + i + span {
color: #29316b;
}
label > input:checked + i:after {
transform: translateX(25px);
}
.filter {
position: absolute;
}
.burger {
margin-bottom: 20px;
margin-right: 35px;
display: flex;
flex-direction: column;
filter: url(#gooeyness);
/*padding: 30px;*/
}
.rect {
background: black;
display: inline-block;
height: 5px;
margin-top: 5px;
transition: transform 500ms;
width: 30px;
}
.rect:nth-child(2) {
transition-delay: 100ms;
}
.rect:nth-child(3) {
transition-delay: 100ms;
}
.burger.active .rect:nth-child(1) {
transform: rotate(-45deg) translateX(-6px) translateY(6px);
}
.burger.active .rect:nth-child(2) {
transform: rotate(45deg);
}
.burger.active .rect:nth-child(3) {
transform: rotate(-45deg) translateX(6px) translateY(-8px);
}
.close {
display: flex;
justify-content:end;
/*position: absolute;*/
cursor: pointer;
/*transform: scale(0.1);*/
z-index: 2500;
}
.border{
border:1px solid red;
}
.settings-container {
/*display: flex;
flex-direction: column;*/
width: 500px;
/*justify-content: center;
height: 250px;
align-items: center;*/
}
MDN
CSS positioning is used here to place the element in the desired spot.
Notice that I added position: relative to .settings-container and position: absolute to .close.
The addition of position: relative is used because...
It (the absolutely positioned element) is positioned relative to its closest positioned ancestor, if any;
otherwise, it is placed relative to the initial containing block.
Then the element you are positioning gets position: absolute which will place the element relative to .settings-container which is now the "closest positioned ancestor".
.base {
position: relative;
max-width: 30em;
background-color: #fff;
padding: 1.125em 1.5em;
font-size: 1.25em;
border-radius: 1rem;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}
.base::before {
content: "";
position: absolute;
width: 0;
height: 0;
bottom: 100%;
right: 1.5em;
border: 0.75rem solid transparent;
border-top: none;
border-bottom-color: #fff;
filter: drop-shadow(0 -0.0625rem 0.0625rem rgba(0, 0, 0, 0.1));
}
html {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 300;
color: #192229;
background: linear-gradient(135deg, #F4F2F3, #BFC6D0);
}
html,
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
body {
padding: 0 2rem;
}
label {
font-family: "Montserrat", sans-serif;
font-size: 1.2rem;
cursor: pointer;
display: block;
margin: 1em;
}
label>input {
display: none;
}
label span {
color: #6A759B;
}
label i {
display: inline-block;
width: 64px;
height: 40px;
border-radius: 20px;
vertical-align: middle;
transition: 0.25s 0.09s;
position: relative;
background: #deeff7;
}
label i:after {
content: " ";
display: block;
width: 30px;
height: 30px;
top: 5px;
left: 5px;
border-radius: 50%;
background: #fff;
position: absolute;
box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.4);
transition: 0.15s;
}
label>input:checked+i {
background: #1094fb;
}
label>input:checked+i+span {
color: #29316b;
}
label>input:checked+i:after {
transform: translateX(25px);
}
.filter {
position: absolute;
}
.burger {
display: flex;
flex-direction: column;
filter: url(#gooeyness);
padding: 30px;
}
.rect {
background: black;
display: inline-block;
height: 32px;
margin-top: 40px;
transition: transform 500ms;
width: 200px;
}
.rect:nth-child(2) {
transition-delay: 100ms;
}
.rect:nth-child(3) {
transition-delay: 100ms;
}
.burger.active .rect:nth-child(1) {
transform: rotate(-45deg) translateX(-51px) translateY(50px);
}
.burger.active .rect:nth-child(2) {
transform: rotate(45deg);
}
.burger.active .rect:nth-child(3) {
transform: rotate(-45deg) translateX(51px) translateY(-50px);
}
.close {
cursor: pointer;
transform: scale(0.1);
position: absolute; /* added */
top: -170px; /* added */
right: -88px; /* added */
}
.settings-container {
display: flex;
flex-direction: column;
position: relative; /* added */
}
<div class="settings-container">
<div class="close">
<svg class="filter" version="1.1">
<defs>
<filter id="gooeyness">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 20 -10" result="gooeyness" />
<feComposite in="SourceGraphic" in2="gooeyness" operator="atop" />
</filter>
</defs>
</svg>
<div class="burger">
<div class="rect"></div>
<div class="rect"></div>
<div class="rect"></div>
</div>
</div>
<div class="base">
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>آموزش کارت حتی در صورت پاسخ صحیح</span>
</label>
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>ضبط صدا در صورت استفاده از تشخیص گفتار</span>
</label>
<label>
<input class="cb cb1" type="checkbox" name="social" checked/>
<i></i>
<span>نمایش جلوه های ویژه ی صوتی و بصری</span>
</label>
</div>
</div>
move it using the position tag in CSS
https://www.w3schools.com/css/css_positioning.asp
Just add position relative to settings-container so the children of this container will count space Regarding to its boundries and then try this.
.base {
position: absolute;
top: 10px: // Change 10px according to your requirement.
right: 10px: // Change 10px according to your requirement.
max-width: 30em;
background-color: #fff;
padding: 1.125em 1.5em;
font-size: 1.25em;
border-radius: 1rem;
box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3), 0 0.0625rem 0.125rem
rgba(0, 0, 0, 0.2);
}
I want to design the above image using pure CSS.
Following is the HTML and CSS I have come up with so far:
<div>
<input
className="my_file"
type="file"
onChange={(event) => {
setImageSelected(event.target.files[0]);
}}
/>
<svg
width="20"
height="18"
viewBox="0 0 20 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="upload_image_icon"
>
<path
d="M7 0L5.17 2H2C0.9 2 0 2.9 0 4V16C0 17.1 0.9 18 2 18H18C19.1 18 20 17.1 20 16V4C20 2.9 19.1 2 18 2H14.83L13 0H7ZM10 15C7.24 15 5 12.76 5 10C5 7.24 7.24 5 10 5C12.76 5 15 7.24 15 10C15 12.76 12.76 15 10 15Z"
fill="white"
/>
</svg>
<Avatar
src={picture}
alt="Avatar"
id="hello"
className="avatar--profile_image"
/>
</div>
and here is my scss:
.profile--card_container {
width: 348px;
height: 448px;
// border: 1px solid rgb(211, 211, 211);
// border-radius: 5px;
.avatar--profile_image {
justify-content: center !important;
margin-bottom: 10px;
margin-top: 10px;
margin-left: 6.50rem;
height: 100px !important;
width: 100px !important;
box-shadow: rgba(0, 0, 0, 0.01) 0px 5px 16px 0px,
rgba(0, 0, 0, 0.10) 0px 0px 0px 0px;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
background-blend-mode: multiply;
color: transparent;
transition: all .3s ease;
cursor: pointer;
border: 2px solid rgba(0, 0, 0, 0.54);
&:after {
content:'\A';
position:absolute;
width:100%; height:100%;
top:0; left:0;
background:rgba(0,0,0,0.6);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
&:hover:after {
opacity:1;
}
}
input[type=file]::-webkit-file-upload-button {
cursor: pointer;
}
.my_file {
position: absolute;
outline: none;
color: transparent;
box-sizing: border-box;
transition: 0.5s;
margin: 45px 0 0 100px;
z-index: 1;
opacity: 0;
cursor: pointer;
}
.upload_image_icon {
margin: 44px 0 0 144px;
cursor: pointer;
position: absolute;
outline: none;
box-sizing: border-box;
z-index: 1;
}
}
here is how my result look like for now:
I am trying to achieve like when I hover profile picture the image will overlay black color and appear camera icon. How can I do that ?
Wrap the image within a div. and then use a pesudo-element with a z-index that onyl dispalys when you hover that div like in the snippet below:
.avatar {
width: 100px;
height: 100px;
position: relative;
}
.avatar img {
width: 100%;
object-fit: cover;
border-radius: 50%;
}
.avatar > div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.6);
z-index: 2;
display: none;
}
.avatar:hover > div {
display: flex;
justify-content: center;
align-items: center;
}
<div class="avatar">
<img src="https://via.placeholder.com/500x500.jpg">
<div>Icon</div>
</div>
I have been trying to make my header responsive and am really struggling with the 'SERVICES' dropdown section when it is in the collapsible menu. Not only does it look terrible with the 'static' position but I cant figure out another way of doing it.
I also am having an issue that when you click the 'SERVICES' button while below 768px it is automatically selecting the first option ('RAIL').
I hope this makes sense. I have linked the codepen below.
enter code here Codepen
header {
background: linear-gradient(to right, #212529 0%, #495057 100%);
display: inline-flex;
justify-content: space-between;
align-items: center;
position: sticky;
width: 100%;
height: 80px;
padding: 10px 2% 10px 2%;
margin: 0;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
z-index: 100;
}
header ul {
margin-block-end: 0;
}
header li, a {
font-weight: 300;
font-size: 1em;
color:#ced4da;
text-decoration: none;
}
.logo-header {
max-height: 50px;
cursor: pointer;
padding: 0 15px;
}
.nav-links {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-links li {
display: inline-block;
padding: 0px 40px;
}
.nav-links li a {
transition: all 0.3s ease 0s;
}
.nav-links li a:hover,
.nav-links li a:active {
font-weight: 500;
transition: all 0.3s ease 0s;
color: #f8f9fa;
text-decoration: underline;
text-underline-offset: 5px;
}
.social-icons {
display: inline-block;
padding: 0px 15px;
}
.social-icons a {
margin: 0px 20px;
transition: all 0.3s ease 0s;
}
.social-icons a:hover {
transition: all 0.3s ease 0s;
color:#f8f9fa;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
z-index: 100;
}
.sticky + .services-title h1 {
padding-top: 80px;
}
.sticky + .main-home {
padding-top: 80px;
}
.sticky + .container-contact {
padding-top: 80px;
}
.dropbtn {
background-color: inherit;
color: #ced4da;
padding: 0 40px;
font-size: 16px;
border: none;
cursor: pointer;
height: 80px;
}
.dropbtn:hover{
font-weight: 500;
transition: all 0.3s ease 0s;
color: #f8f9fa;
text-decoration: underline;
text-underline-offset: 5px;
}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown-content {
position: absolute;
background:#343a40;
min-width: 160px;
overflow: auto;
box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
text-align: center;
display: none;
}
.dropdown-content a {
padding: 12px 16px;
display: block;
font-weight: 300;
font-size: 1em;
color:#ced4da;
text-decoration: none;
}
.dropdown-content a:hover {
font-weight: 500;
transition: all 0.3s ease 0s;
color: #f8f9fa;
text-decoration: underline;
text-underline-offset: 5px;
}
#home-header {
position: fixed;
top: 0;
left: 0;
}
#nav-toggle {
position: absolute;
top: -100px;
}
nav .icon-burger {
display: none;
position: absolute;
right: 5%;
top: 50%;
transform: translateY(-50%);
}
nav .icon-burger .line {
width: 30px;
height: 5px;
background: #fff;
margin: 5px;
}
/*=====media queries=======*/
#media only screen and (max-width: 768px) {
.nav-links {
justify-content: space-evenly;
float: none;
position: fixed;
z-index: 9;
left: 0;
right: 0;
top: 80px;
bottom: 100%;
width: 100%;
max-height: 200px;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.7);
overflow: hidden;
transition: all .5s ease-in-out;
}
header :checked ~ .nav-links {
bottom: 0;
}
.nav-links .dropbtn {
padding: 0;
width: 100%;
height: 20px;
}
.dropdown-content {
position: static;
width: 100%;
background-color: rgba(0, 0, 0, 0);
}
nav .icon-burger {
display: block;
}
nav :checked ~ .icon-burger .line:nth-child(1) {
transform: translateY(10px) rotate(225deg);
transition: all .5s ease-in-out;
}
nav :checked ~ .icon-burger .line:nth-child(3) {
transform: translateY(-10px) rotate(-225deg);
transition: all .5s ease-in-out;
}
nav :checked ~ .icon-burger .line:nth-child(2) {
opacity: 0;
transition: all .5s ease-in-out;
}
}
/* Medium devices (landscape tablets, 769px to 1024px) */
#media only screen and (max-width: 1024px) {
header {
padding-right: 0;
}
#social-icons-header a {
display:none;
}
}
<header id="home-header" class="main-header-fixed">
<img class="logo-header" src="Images/Logo grey Transparent.png" alt="Kompact Production Logo">
<nav class="main-nav">
<input id="nav-toggle" type="checkbox">
<ul class=" nav-links">
<li>HOME</li>
<div class="dropdown">
<button class="dropbtn">SERVICES</button>
<div class="dropdown-content">
RAIL
EVENTS
</div>
</div>
<li>PORTFOLIO</li>
<li>CONTACT US</li>
</ul>
<label for="nav-toggle" class="icon-burger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</label>
</nav>
<div class="social-icons" id="social-icons-header">
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-facebook" viewBox="0 0 16 16">
<path
d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z" />
</svg></a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-instagram" viewBox="0 0 16 16">
<path
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z" />
</svg></a>
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-linkedin" viewBox="0 0 16 16">
<path
d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z" />
</svg></a>
</div>
</header>
You can do the following:
When the dropdown is hidden, the height of the element including "Rail" and "Events" is set to 0. When hovering "Services", you can increase the height of the element. To have a smooth transition you can add transition property to the element, so the animation from 0 to full height is smooth.
I guess "Rail" is selected in the mobile view due to the fact that the cursor points to its section when opening the dropdown.
thanks for that but I do understand the reason why it is happening and understand I can put a transition property o the element but what I would ideally love to happen would be for the 'RAIL' and 'EVENT' to come down as 100% block elements and push 'PORTFOLIO' down.
I want this to happen with the drop down menu when it is under 768px.
In relation to the 'RAIL' being selected in mobile view, again, I understand what is happening but am seeking advise on how to work around this and make it more user friendly
When focusing in search input search input is growing left and not covering on the svg icon. But focusing out input is shrinking to the right to be covering the svg icon. I want to the same animation as focusing in (to be reversed) without covering the svg icon. I can start background-color animation to earlier. But I don't want to solve this problem to changing background-color animation time. How can I solve it?
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 400;
line-height: 1.6;
}
.wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
height: 5rem;
width: 100%;
background-color: orangered;
background: #6f42c1;
background: linear-gradient(30deg, #6f42c1 35%, #6610f2 75%, #007bff 100%);
box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.75);
margin-top:5rem;
}
.search-3 {
margin-right: 2rem;
display: inline-block;
position: relative;
height: 3rem;
width: 0;
}
.search-3__text {
display: inline-block;
height: 3rem;
width: 3rem;
background-color: transparent;
border: none;
outline: none;
border-radius: 2px;
font-family: "Roboto Slab", serif;
font-size: 1.6rem;
font-weight: 400;
color: #000;
position: absolute;
top: 0;
right: 0;
z-index: 5;
cursor: pointer;
transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0s, background-color 0.2s ease-out 0.4s;
}
.search-3__text::placeholder {
color: transparent;
font-size: 1.5rem;
font-weight: 300;
font-style: italic;
transition: color 0s ease-in-out 0s;
}
.search-3__text:focus {
width: 50rem;
z-index: 3;
cursor: text;
background-color: #fff;
transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0.2s, background-color 0.2s ease-in-out 0s;
}
.search-3__text:focus::placeholder {
color: #000;
transition: color 0.2s ease-in-out 0.5s;
}
.search-3__icon {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
border: none;
position: absolute;
top: 0;
right: 0;
z-index: 4;
cursor: pointer;
}
.search-3__icon svg {
display: inline-block;
height: 2rem;
width: 2rem;
color: #000;
filter: drop-shadow(2px 1px 1px #7A8288);
}
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400i,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-search" viewBox="0 0 26 28">
<title>search</title>
<path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z">
</path>
</symbol>
</defs>
</svg>
<div class="wrap">
<form class="search-3" action="" autocomplete="on">
<input class="search-3__text" id="search-3" name="search-3" type="text" placeholder="Sitede ara.." page_search onfocusout="if(this.value !=''){this.value='';}">
<span class="search-3__icon">
<svg>
<use xlink:href="#icon-search" />
</svg>
</span>
</form>
</div>
</body>
Here's one method.
Don't rely on changing z-index while animating the text input.
Instead, set the icon to pointer-events: none so that the clicks pass through it to the text box underneath.
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
font-weight: 400;
line-height: 1.6;
}
.wrap {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
height: 5rem;
width: 100%;
background-color: orangered;
background: #6f42c1;
background: linear-gradient(30deg, #6f42c1 35%, #6610f2 75%, #007bff 100%);
box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.75);
margin-top:5rem;
}
.search-3 {
margin-right: 2rem;
display: inline-block;
position: relative;
height: 3rem;
width: 0;
}
.search-3__text {
display: inline-block;
height: 3rem;
width: 3rem;
background-color: transparent;
border: none;
outline: none;
border-radius: 2px;
font-family: "Roboto Slab", serif;
font-size: 1.6rem;
font-weight: 400;
color: #000;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0s, background-color 0.2s ease-out 0.4s;
}
.search-3__text::placeholder {
color: transparent;
font-size: 1.5rem;
font-weight: 300;
font-style: italic;
transition: color 0s ease-in-out 0s;
}
.search-3__text:focus {
width: 50rem;
cursor: text;
background-color: #fff;
transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0.2s, background-color 0.2s ease-in-out 0s;
}
.search-3__text:focus::placeholder {
color: #000;
transition: color 0.2s ease-in-out 0.5s;
}
.search-3__icon {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
height: 3rem;
width: 3rem;
border: none;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
pointer-events: none;
}
.search-3__icon svg {
display: inline-block;
height: 2rem;
width: 2rem;
color: #000;
filter: drop-shadow(2px 1px 1px #7A8288);
}
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400i,700&subset=latin-ext" rel="stylesheet">
</head>
<body>
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-search" viewBox="0 0 26 28">
<title>search</title>
<path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z">
</path>
</symbol>
</defs>
</svg>
<div class="wrap">
<form class="search-3" action="" autocomplete="on">
<input class="search-3__text" id="search-3" name="search-3" type="text" placeholder="Sitede ara.." page_search onfocusout="if(this.value !=''){this.value='';}">
<span class="search-3__icon">
<svg>
<use xlink:href="#icon-search" />
</svg>
</span>
</form>
</div>
</body>
This question already has answers here:
How can I override inline styles with external CSS?
(7 answers)
Closed 5 years ago.
This is how the div currently looks like
<div class="toolbar" style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(232, 232, 232); height: 56px; padding: 0px 24px; display: flex; justify-content: space-between;"><div class="toolbar" style="position: relative; margin-left: -24px; display: flex; justify-content: space-between; align-items: center;"><div style="display: inline-block; font-size: 15px; height: 48px; font-family: Roboto, sans-serif; outline: none; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; color: rgba(0, 0, 0, 0.54); margin-right: 24px; flex: 1 1 0%; white-space: nowrap; width: auto;"><div style="cursor: pointer; height: 100%; position: relative; width: 100%;"><div style="box-sizing: border-box; content: " "; display: table;"></div><div style="color: rgba(0, 0, 0, 0.87); height: 56px; line-height: 56px; overflow: hidden; opacity: 1; position: relative; padding-left: 24px; padding-right: 56px; text-overflow: ellipsis; top: 0px; white-space: nowrap;">ALL CLIENTS</div><button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 12px; outline: none; font-size: 0px; font-weight: inherit; position: absolute; z-index: 1; overflow: visible; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; width: 48px; height: 48px; fill: rgb(224, 224, 224); right: 16px; top: 4px; background: none;"><div><svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: inherit; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;"><path d="M7 10l5 5 5-5z"></path></svg></div></button><div style="border-top: 1px solid rgb(224, 224, 224); bottom: 1px; left: 0px; margin: -1px 24px; right: 0px; position: absolute; display: none;"></div><div style="box-sizing: border-box; content: " "; clear: both; display: table;"></div></div><div style="display: none;"><!-- react-empty: 25 --><!-- react-empty: 26 --></div></div></div><div class="toolbar" style="position: relative; margin-left: -24px; display: flex; justify-content: space-between; align-items: center;"><div style="display: inline-block; font-size: 15px; height: 48px; font-family: Roboto, sans-serif; outline: none; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; color: rgba(0, 0, 0, 0.54); margin-right: 24px; flex: 1 1 0%; white-space: nowrap; width: auto;"><div style="cursor: pointer; height: 100%; position: relative; width: 100%;"><div style="box-sizing: border-box; content: " "; display: table;"></div><div style="color: rgba(0, 0, 0, 0.87); height: 56px; line-height: 56px; overflow: hidden; opacity: 1; position: relative; padding-left: 24px; padding-right: 56px; text-overflow: ellipsis; top: 0px; white-space: nowrap;">ALL VERTICALS</div><button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 12px; outline: none; font-size: 0px; font-weight: inherit; position: absolute; z-index: 1; overflow: visible; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; width: 48px; height: 48px; fill: rgb(224, 224, 224); right: 16px; top: 4px; background: none;"><div><svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: inherit; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;"><path d="M7 10l5 5 5-5z"></path></svg></div></button><div style="border-top: 1px solid rgb(224, 224, 224); bottom: 1px; left: 0px; margin: -1px 24px; right: 0px; position: absolute; display: none;"></div><div style="box-sizing: border-box; content: " "; clear: both; display: table;"></div></div><div style="display: none;"><!-- react-empty: 39 --><!-- react-empty: 40 --></div></div></div><div class="toolbar" style="position: relative; margin-left: -24px; display: flex; justify-content: space-between; align-items: center;"><div style="display: inline-block; font-size: 15px; height: 48px; font-family: Roboto, sans-serif; outline: none; position: relative; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; color: rgba(0, 0, 0, 0.54); margin-right: 24px; flex: 1 1 0%; white-space: nowrap; width: auto;"><div style="cursor: pointer; height: 100%; position: relative; width: 100%;"><div style="box-sizing: border-box; content: " "; display: table;"></div><div style="color: rgba(0, 0, 0, 0.87); height: 56px; line-height: 56px; overflow: hidden; opacity: 1; position: relative; padding-left: 24px; padding-right: 56px; text-overflow: ellipsis; top: 0px; white-space: nowrap;">ALL INSTANCES</div><button tabindex="0" type="button" style="border: 10px; box-sizing: border-box; display: inline-block; font-family: Roboto, sans-serif; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); cursor: pointer; text-decoration: none; margin: 0px; padding: 12px; outline: none; font-size: 0px; font-weight: inherit; position: absolute; z-index: 1; overflow: visible; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms; width: 48px; height: 48px; fill: rgb(224, 224, 224); right: 16px; top: 4px; background: none;"><div><svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.87); fill: inherit; height: 24px; width: 24px; user-select: none; transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;"><path d="M7 10l5 5 5-5z"></path></svg></div></button><div style="border-top: 1px solid rgb(224, 224, 224); bottom: 1px; left: 0px; margin: -1px 24px; right: 0px; position: absolute; display: none;"></div><div style="box-sizing: border-box; content: " "; clear: both; display: table;"></div></div><div style="display: none;"><!-- react-empty: 53 --><!-- react-empty: 54 --></div></div></div></div>
As you can see the style attribute puts a background-color property as
style="box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(232, 232, 232);
However, I wanted a different color and I can not change this div directly, so I added a CSS class called toolbar that looks like
.toolbar {
background-color: #37517e;
color: #ffffff;
}
Which can be seen from the div code above. However, the background-color from .toolbar is ignored and the one from style is applied. I confirmed this in DevTools
How can I apply the color of my choice?
used !important in css property
.toolbar {
background-color: #37517e!important;
color: #ffffff;
}
.rowTest{
background-color:pink!important;
}
<div style="background-color:green;width:100%;height:50px;" class="rowTest"><div>
The only way to override inline style attribute using class is with the !important keyword:
.toolbar {
background-color: #37517e !important;
color: #ffffff;
}
Here is a working example:
div.cls {
color: blue !important;
}
<div style="color: red;" class="cls">This text should be red, but it's not</div>
Use the !important tag. This overrides other CSS rules that may apply. That said -- having a bunch of styling in the style tag in your HTML is discouraged. I'd add this information to your stylesheet and associate it with the div and class. This allows you to better visualize the cascading nature of the rules... the latest rule applies to an element.