I have created custom radio buttons using HTML, CSS, JS.
Now, it can pick multiple choices at one time like 2, 3, or 4 choices. What I want to do is to only pick one choice at a time.
And, I want to know if there is a way, instead of adding multiple ::after with the same values for all divs, can I add one ::after for all 4 divs.
let mainBtns = document.querySelectorAll('#container');
mainBtns.forEach(btn => {
btn.addEventListener('click', () => {
btn.classList.toggle('active');
});
});
.main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 20px;
}
.first, .second, .third, .forth {
display: flex;
place-content: center;
place-items: center;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(202, 202, 202);
cursor: pointer;
position: relative;
box-shadow: 0 0 6px 1px #e8eef6;
}
.first::after {
content: '';
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
vertical-align: middle;
visibility: hidden;
}
.second::after {
content: '';
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
visibility: hidden;
}
.third::after {
content: '';
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
visibility: hidden;
}
.forth::after {
content: '';
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
visibility: hidden;
}
.active::after {
visibility: visible;
}
.deActive::after {
visibility: hidden;
}
<div class="main">
<div id="container" class="first"></div>
<div id="container" class="second"></div>
<div id="container" class="third"></div>
<div id="container" class="forth"></div>
</div>
The default behavior of HTML <input type="radio"> is already what you want. You can directly style them with CSS.
.main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 20px;
}
.main>input {
appearance: none;
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(202, 202, 202);
cursor: pointer;
box-shadow: 0 0 6px 1px #e8eef6;
}
.main>input::after {
content: '';
position: absolute;
top: 15px;
left: 15px;
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
visibility: hidden;
}
.main>input:checked::after {
visibility: visible;
}
<div class="main">
<input type="radio" id="apple" name="fruit" value="apple" checked>
<input type="radio" id="orange" name="fruit" value="orange">
<input type="radio" id="banana" name="fruit" value="banana">
</div>
To avoid repeating ::after for each button you can use element > element selector;
And for picking one choice at a time, you need to reset the class name of the buttons (remove active class name from all buttons) then add active to the selected one
const mainBtns = document.querySelectorAll(".btn");
mainBtns.forEach(btn => {
btn.addEventListener("click", () => {
if (btn.classList.contains("active")) return btn.classList.remove("active");
mainBtns.forEach(btn => (btn.className = "btn"));
btn.classList.add("active");
});
});
.main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
gap: 20px;
}
.main>div {
display: flex;
place-content: center;
place-items: center;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(202, 202, 202);
cursor: pointer;
position: relative;
box-shadow: 0 0 6px 1px #e8eef6;
}
.main>div::after {
content: "";
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
vertical-align: middle;
visibility: hidden;
}
.main>.active::after {
visibility: visible;
}
<div class="main">
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
<div class="btn"></div>
</div>
You cant use id property for multiple elements
And for your Code
You can modify your code like this
HTML
<div id="custom-radio-button" class="main">
<div class="first" onclick="selectMe(this)"></div>
<div class="scond" onclick="selectMe(this)"></div>
<div class="third" onclick="selectMe(this)"></div>
<div class="forth" onclick="selectMe(this)"></div>
</div>
CSS
.first::after,
.scond::after,
.third::after,
.forth::after {
content: '';
height: 70px;
width: 70px;
border-radius: 50%;
background-color: rgb(78, 78, 78);
position: absolute;
vertical-align: middle;
visibility: hidden;
}
JavaScript
let mainBtns = document.getElementById("custom-radio-button").children
function selectMe(element) {
for (let index = 0; index < mainBtns.length; index++) {
if (mainBtns[index] === element) {
mainBtns[index].classList.add("active")
} else {
mainBtns[index].classList.remove("active")
}
}
}
Functionality already exists in html, you can customize them with css.
.container {
width: 50%;
height: 300px;
text-align: center;
margin: auto;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.container [type="radio" i] {
transform: scale(1);
appearance: none;
width: 50px;
height: 50px;
border-radius: 50%;
border: 25px solid #999;
}
.container [type="radio" i]:checked {
border: 8px solid #999;
background-color: #000;
}
<div class="container">
<input type="radio" name="radio-group">
<input type="radio" name="radio-group">
<input type="radio" name="radio-group">
<input type="radio" name="radio-group">
</div>
Related
I have this HTML and CSS markup:
body {
background-color: #f5f5f5;
}
._contain_items {
display: block;
width: 1000px;
height: fit-content;
border: 1px solid rgba(0, 0, 0, .12);
background-color: #ffffff;
}
._inline_task {
display: flex;
flex-direction: row;
}
._when {
margin-top: 0% !important;
margin-left: auto;
margin-bottom: 0% !important;
align-self: flex-end;
}
._lightweighted {
margin-top: 0% !important;
font-size: 16px;
font-weight: 500;
color: #7f8ca1;
}
._title_task {
margin-top: 0% !important;
margin-bottom: 0% !important;
}
.checkbox-container {
width: 50px;
height: 28px;
display: flex;
align-items: center;
margin-right: 10px;
position: relative;
}
.checkbox-container label {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: relative;
top: 0;
width: 28px;
}
.checkbox-container label:after {
border: 2px solid #fff;
border-top: none;
border-right: none;
content: "";
height: 6px;
left: 7px;
opacity: 0;
position: relative;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
.checkbox-container input[type="checkbox"] {
visibility: hidden;
}
.checkbox-container input[type="checkbox"]:checked+label {
background-color: #66bb6a;
border-color: #66bb6a;
}
.checkbox-container input[type="checkbox"]:checked+label:after {
opacity: 1;
}
<div class="_contain_items">
<h3> Employee Tasks </h3>
<hr style="border: none;height: 1px;background-color: #333;">
<div class="_inline_task">
<div class="checkbox-container">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
</div>
<h3 class="_title_task"> Title of the task </h3>
<h3 class="_when"> Tomorrow </h3>
</div>
<p class="_lightweighted"> Housekeeping </p>
</div>
</body>
The problem that I'm facing is at the checkbox. I want to make a circle checkbox with this ✔️ sign. When position is absolute it works as intended but it is not before h3(Title of the task). When I change position at relative the circle appears at the right place but the sign its not there. How do I make it appear before the h3?
There are some accessibility issues, so here are my recommendations:
Avoiding too many h3 that could be replaced by a span or p.
Put the text related to the checkbox inside the label. Also is not a good practice to put a heading inside the label
Use rem instead px for font-size, due to px won't resize with the user preferences.
So here is your code with my considerations
<div class="checkbox">
<input type="checkbox" id="checkbox" checked/>
<label for="checkbox">
<span class="title-task">Title of the task</span>
<span class="when">Tomorrow</span>
</label>
</div>
and the checkbox css with this:
.checkbox>label {
position: relative; /* Create a positioning context */
/* ... */
}
.checkbox>label:before {
/* checkbox styling */
/* ... */
}
.checkbox>input {
/* hide the checkbox */
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.checkbox>input:checked+label:before {
/* checkbox checked styling */
/* ... */
}
.checkbox>input+label:after {
/* checkbox checked icon */
position: absolute; /* Position the checkmark */
/* ... */
}
.checkbox>input:checked+label:after {
/* ... */
}
Here I left you a full-functioning snippet with your modified code
.contain-items {
background-color: #fff;
display: block;
height: fit-content;
width: 100%;
}
.divider {
background-color: #333;
border: none;
height: 1px;
}
.inline-task {
display: flex;
/* row by default */
flex-wrap: wrap;
}
.checkbox {
width: 100%;
}
.checkbox>label {
align-items: center;
display: flex;
position: relative;
}
.checkbox>label:before {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 50%;
content: '';
cursor: pointer;
display: inline-block;
height: 1.75rem;
margin-right: 0.5rem;
width: 1.75rem;
}
.checkbox>input {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.checkbox>input:checked+label:before {
background-color: #66bb6a;
border-color: #66bb6a;
}
.checkbox>input+label:after {
border: 2px solid #fff;
border-right: none;
border-top: none;
content: '';
height: 6px;
left: 7px;
opacity: 0;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}
.checkbox>input:checked+label:after {
opacity: 1;
}
.lightweighted {
color: #7f8ca1;
font-size: 1rem;
font-weight: 500;
margin: 0;
}
<body>
<div class="contain-items">
<h3>Employee Tasks</h3>
<hr class="divider" />
<article class="inline-task">
<div class="checkbox">
<input type="checkbox" id="checkbox" checked/>
<label for="checkbox">
<span class="title-task">Title of the task</span>
<span class="when">Tomorrow</span>
</label>
</div>
<p class="lightweighted">Housekeeping</p>
</article>
</div>
</body>
I need little help, I'm new to JavaScript. I'm not sure how to fix the bug, currently, the code on hover is making the first box to display the title. But I want the title to be shown only on the chosen box. I thought in the for loop, the boxes[i] will make his first className[0] to display flex, but I guess it doesn't work that way. How can I fix this?
var boxes = document.getElementsByClassName("portfolio-content-box");
for(var i = 0; i < boxes.length; i ++){
boxes[i].addEventListener("mouseover", function(){
document.getElementsByClassName("portfolio-content-title-box")[0].style.display = "flex";
})
}
.portfolio-content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-self: center;
margin-top: 100px;
padding: 2rem;
}
.portfolio-content-box {
position: relative;
width: 400px;
height: 350px;
margin: 1rem;
border-left:2px solid red;
cursor:pointer;
transition:0.3s;
}
.portfolio-content-box:hover {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.portfolio-content-img {
width: 400px;
height: 350px;
object-fit: cover;
}
.portfolio-content-title-box {
position: absolute;
top:0;
left:0;
color: #FFF;
text-shadow: 0px 1px 1px RGBA(0,0,0,1);
background-color:rgba(0,0,0,0.8);
width:100%;
height:100%;
display:none;
}
.portfolio-content-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div id="portfolio-container">
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyn7ssQEg-KFcYHmAelMv3ro3wGqsMdmE8lw&usqp=CAU" class="portfolio-content-img"/>
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqg54h1j3ljdf73LUi1rAobP0jxmrbEd9W1A&usqp=CAU" class="portfolio-content-img"/>
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
</div>
Not sure why you want to use JS, but it can be done with pure CSS. You just need to target the title box when someone hovers the content box as below
.portfolio-content-box:hover>.portfolio-content-title-box {
display: flex;
}
Working Code
.portfolio-content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-self: center;
margin-top: 100px;
padding: 2rem;
}
.portfolio-content-box {
position: relative;
width: 400px;
height: 350px;
margin: 1rem;
border-left: 2px solid red;
cursor: pointer;
transition: 0.3s;
}
.portfolio-content-box:hover {
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}
.portfolio-content-img {
width: 400px;
height: 350px;
object-fit: cover;
}
.portfolio-content-title-box {
position: absolute;
top: 0;
left: 0;
color: #FFF;
text-shadow: 0px 1px 1px RGBA(0, 0, 0, 1);
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
display: none;
}
.portfolio-content-title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.portfolio-content-box:hover>.portfolio-content-title-box {
display: flex;
}
<div id="portfolio-container">
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyn7ssQEg-KFcYHmAelMv3ro3wGqsMdmE8lw&usqp=CAU" class="portfolio-content-img" />
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
<div class="portfolio-content-box">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqg54h1j3ljdf73LUi1rAobP0jxmrbEd9W1A&usqp=CAU" class="portfolio-content-img" />
<span class="portfolio-content-title-box">
<span class="portfolio-content-title">Title</span>
</span>
</div>
</div>
I want to add the images to my select list using only HTML CSS JS. (no library) I know the browsers don't support the images inside dropdown i.e., the select option of HTML.
Is there any way around/a hack to achieve this?
A: How it should look like before the user clicks on the dropdown.
B: How it should look like after the user clicks on the dropdown.
A:
B:
I tried using,
HTML
<select class="dropdown" name="payment-provider" id="payment-provider" form="payment">
<option value="BitCoin">BTC</option>
<option value="Ethereum">ETH</option>
<option value="Cardano">ADA</option>
<option value="Tether">USDT</option>
</select>
CSS
select#payment-provider option[value="BitCoin"] {
background: url(/_assets/images/svg/BTC.svg) no-repeat right;
width: 22px;
height: 22px;
}
But this code was only supported by the Firefox browser, however even Firefox has now withdraw this support.
Will appriciate the help.
Thanks
Check the snippet below. I created a custom component using UL>LI.
var placeholder = document.getElementById('placeholder');
var dropdown = document.getElementById('custom-select');
placeholder.addEventListener('click', function() {
if(dropdown.classList.contains('active')) {
dropdown.classList.remove('active')
} else {
dropdown.classList.add('active')
}
})
.custom-select .dropdown {
list-style: none;
padding: 0;
display: none;
}
.dropdown .img-wrapper,
.placeholder .img-wrapper {
display: inline-block;
max-width: 30px;
}
.dropdown img,
.placeholder img {
max-width: 100%;
}
.placeholder {
display: flex;
align-items: center;
padding: 10px;
cursor: pointer;
position: relative;
}
.placeholder::before,
.placeholder::after {
content: "";
display: inline-block;
height: 2px;
width: 10px;
background-color: #aaa;
position: absolute;
right: 0;
}
.placeholder::before {
transform: rotate(45deg);
right: 20px;
}
.placeholder::after {
transform: rotate(-45deg);
right: 15px;
}
.custom-select.active .placeholder::after {
right: 20px;
}
.custom-select.active .placeholder::before {
right: 15px;
}
.custom-select.active .dropdown {
display: flex;
flex-direction: column;
box-shadow: 1px 1px 6px 1px #ddd;
position: absolute;
top: 40px;
right: 0;
left: 0;
min-width: 200px;
}
.dropdown li {
display: flex;
align-items: center;
background-color: #fff;
padding: 10px;
transition: all 0.3s ease;
cursor: pointer;
}
.dropdown li:not(:last-child) {
border-bottom: 1px solid #aaa;
}
.dropdown li:hover {
box-shadow: 0px 0px 11px 1px rgba(182, 182, 182, 0.75) inset;
}
.custom-select {
display: inline-flex;
flex-direction: column;
position: relative;
width: 100px;
}
input {
border: 0;
outline: none;
box-shadow: none;
width: 40px;
display: inline-block;
height: 30px;
text-align: right;
}
.wrapper {
display: inline-flex;
position: relative;
border: 1px solid #ddd;
border-radius: 5px;
margin-top: 50px;
align-items: center;
}
.input-label {
position: absolute;
background-color: #fff;
top: -6px;
display: inline-block;
left: 10px;
padding: 0 5px;
color: #aaa;
}
<section class="wrapper">
<label for="" class="input-label">You Receive</label>
<input type="number" readonly value=".32" />
<div class="custom-select" id="custom-select">
<span id="placeholder" class="placeholder">
<span class="img-wrapper">
<img src="https://pngimg.com/uploads/bitcoin/bitcoin_PNG48.png" />
</span>
<span class="text"> BTC</span>
</span>
<ul class="dropdown" id="dropdown">
<li class="dd-item">
<span class="img-wrapper">
<img src="https://pngimg.com/uploads/bitcoin/bitcoin_PNG48.png" />
</span>
<span class="text">Bitcoin (BTC)</span>
</li>
<li class="dd-item">
<span class="img-wrapper">
<img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" />
</span>
<span class="text">Ethereum (ETH)</span>
</li>
<li class="dd-item">
<span class="img-wrapper">
<img src="https://cryptologos.cc/logos/cardano-ada-logo.png" />
</span>
<span class="text">Cardano (ADA)</span>
</li>
</ul>
</div>
</section>
I am creating some cards that are to display a kind of timeline, and I want to do that by having some card divs with content that are connected with a line and with a circle at each of the ends of the line to make it look good. Currently I just have the cards, and I cannot figure out how to make the connected lines. I currently have something like this:
HTML:
<div class="card-wrapper">
<div class="card">
</div>
<div class="card">
</div>
</div>
CSS:
.card-wrapper {
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
}
.card {
width: 15rem;
height: 25rem;
background-color: #4090ff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 2rem 4rem;
box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.3);
}
JSFiddle: https://jsfiddle.net/L3h9xe5d/10/
And I want something like this:
Please follow the above steps..
HTML
<div class="card-wrapper">
<div class="card">
<div class="card-inner"></div>
</div>
<div class="card">
<div class="card-inner"></div>
</div>
<div class="card">
<div class="card-inner"></div>
</div>
<div class="card">
<div class="card-inner"></div>
</div>
</div>
css
.card-wrapper {
display: flex;
align-items: center;
align-content: center;
flex-direction: row;
}
.card {
width: 15rem;
height: 25rem;
background-color: #4090ff;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin: 2rem 4rem;
box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.3);
position: relative;
}
.card::after {
position: absolute;
right: -20px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
background-color: #4090ff;
border-radius: 50%;
border: 6px solid #fff;
content: "";
}
.card::before {
position: absolute;
left: -20px;
top: 50%;
transform: translateY(-50%);
width: 26px;
height: 26px;
background-color: #4090ff;
border-radius: 50%;
border: 6px solid #fff;
content: "";
z-index: 9;
}
.card:first-child::before,
.card:last-child::after,
.card:first-child .card-inner::before,
.card:last-child .card-inner::after {
display: none;
}
.card-inner {
width: 100%;
height: 100%;
}
.card-inner::after {
position: absolute;
right: -65px;
top: 50%;
transform: translateY(-50%);
background-color: #000;
content: "";
width: 65px;
height: 4px;
}
.card-inner::before {
position: absolute;
left: -65px;
top: 50%;
transform: translateY(-50%);
background-color: #000;
content: "";
width: 65px;
height: 4px;
}
.q-items-container .q-item-info {
float: left;
position: relative;
width: 30.3rem;
height: 40rem;
margin: 2rem;
background: #ffffff;
cursor: pointer;
/* Add shadows to create the "card" effect */
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.q-items-container .q-item-info .q-food-img {
width: 100%;
height: 55%;
}
.q-items-container .q-item-info .q-food-info {
position: absolute;
top: 20px;
left: 20px;
z-index: 10000;
color: white;
}
.q-items-container .q-item-info .q-stars {
background-color: #2eb82e;
padding: 2px;
margin-top: 3px;
border-radius: 3px;
}
.q-items-container .q-item-info .q-separator {
width: 100%;
height: 7px;
background-color: #6c41a6;
}
.q-items-container .q-item-info .comp-container {
width: 100%;
height: 8rem;
position: absolute;
text-align: center;
top: 275px;
/* background-color:black; */
}
.q-items-container .q-item-info .comp-container .q-review {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.q-items-container .q-item-info .comp-container .q-review .review {
width: 48%;
/* margin:auto; */
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.q-items-container .q-item-info .comp-container .q-review .sep {
width: 4%;
display: flex;
padding: 5px 0 5px 0;
justify-content: center;
align-items: center;
}
.q-items-container .q-item-info .comp-container .q-review .price {
width: 48%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.q-item-info .comp-container .q-company {
width: 8rem;
height: 8rem;
border: 0.8rem solid #6c41a6;
-webkit-border-radius: 2rem;
border-radius: 4rem;
margin: auto;
}
.q-items-container .q-item-info .q-order-now {
position: absolute;
bottom: 0;
width: 100%;
padding: 1rem;
margin-bottom: 0;
height: 4rem;
background: #6c41a6;
color: #fff;
font-size: 1.4rem;
text-align: center;
}
<div class="q-items-container">
<div class="q-item-info">
<div class="q-food-info">
<div>xyz</div>
<div>yzx</div>
</div>
<img style="background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
rgba(0,0,0,0.55);" class="q-food-img" src="https://static.pexels.com/photos/8313/food-eating-potatoes-beer-8313.jpg">
<div class="q-separator"></div>
<div class="comp-container">
<img class="q-company" src="https://n6-img-fp.akamaized.net/free-icon/telegram-logo_318-102687.jpg?size=338c&ext=jpg">
<div class="q-review">
<div class="review">
<span style="color:#4d4d49;">24</span>
<span style="color:#898989;">Reviews</span>
</div>
<div class="sep">
<div style="width:1px;height:100%;background-color:#d7d7d7;"></div>
</div>
<div class="price">
<span style="color:#4d4d49;">$4.99</span>
<span style="color:#898989;">Avg.Price</span>
</div>
<div>
</div>
</div>
</div>
<div class="q-order-now" ng-click="goToListingPage(cart)">
<div ng-show="cart.isOpen">Order Now <span>→</span></div>
<div ng-show="!cart.isOpen && !cart.isClosed">Opens at 8</div>
<div ng-show="cart.isClosed">Closed</div>
</div>
</div>
Now i want to achieve overlay effect like
I tried with linear background gradient , but it did not work out. One thing I want to mention here is, my image is dynamically set. How can I achieve that?
Try to apply the following css, then I believe you'll be able to apply it to the right element in code.
.q-items-container .q-item-info .q-food-info {
background-image: linear-gradient(0deg, rgba(0,0,0,0), rgba(0,0,0,1));
width: 100%;
}