How to detect click with native html/css for slider [closed] - html

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last month.
Improve this question
I am trying to create slider only with html/css. I'm using inputs and labels.
This is my css code. I'm moving my div to left when element is checked.
.firstCat:checked ~ .carousel-wrapper div { left: 360px; transition: left 0.3s ease-in-out; }
Is it the only way to create sider? Maybe you more elegant solution.

<input type="range" min="1" max="100" value="50" class="slider">
You can use input type "range".

Related

Is it ok to use label without an input field? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 months ago.
Improve this question
I need to add some info in my form that is not related to the input fields.
Can I use <label> without having an input field because I want to maintain a consistent look with the rest of the form's text? Or should I use another method?
You can use label I think, but I don't suggest it. Use a span or a h(x) tag and add that tag to your css like :
label, span {
background: black;
color: white;
....
}

HTML Color Bar how to? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 1 year ago.
Improve this question
I have no idea how to go about this. I have tried to use an image, but can never get it to look right, but if I do it doesn't work well with other devices.
Here's what I'm trying to model after
thanks!
Just try to create a div with a height of 2px, with a linear-gradient background
<div class="br"></div>
.br {
height: 2px;
background: linear-gradient(YOUR COLORS HERE);
}
To create a radiant easily go to https://cssgradient.io/

Css with multiple classes not working when one is :hover [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
I'm trying to build a css class which has the same style of another one with the :hover property.
The problem is that only when I'm over the element the style is applied and not where I specify the new class.
This is my try:
.body_cal .cell_cal:hover .bg_cal,
.body_cal .cell_cal .bg_cal .hover_cal {
opacity: 0.2;
transition: .3s ease-in;
}
I would like that by adding the hover_cal class I'd get the same result as moving the mouse over it.
You can achieve the same effect by placing .hover_cal in the same order as the .cell_call:hover pseudo class:
.body_cal .cell_cal:hover .bg_cal,
.body_cal .hover_cal .bg_cal{
opacity: 0.2;
transition: .3s ease-in;
}

Can you change the colour of <legend>? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I was wondering if you could change the colour of the line that the tag <legend> makes?
You can do it by changing the border-color of fieldset tag.
CSS code
.fieldset{
border-color: #ff0000; /*color of your choice*/
}
Html code
<fieldset style="border-color:#ff0000">
<legend>Some name:</legend>
</fieldset>

Styling the clicked placeholder in CSS [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
When styling a placeholder, we use ::-webkit-input-placeholder, but what if we want to style a placeholder of a clicked input text field?
For an example, http://www.bbc.com/news/uk
the color of placeholder of the search box on the right top in the website is dark gray, but when you click in the search box, the color turns into light gray. Can I know how was that done?
You can use the :focus and ::-webkit-input-placeholder to achieve this. Here is the working demo
HTML
<input type="text" placeholder="My Placeholder" id="myInput">
CSS
#myInput:focus::-webkit-input-placeholder {
color: red;
}