I am trying to figure out how to make a 10px halo over the -slider-thumb attribute of my range input slider. I am using React, CSS and HTML and have found this difficult to do because of the overflow:hidden property. This property must stay, as basically none of the code works without it(This was part of a solution to editing the slider base css). I have tried using ::after and ::before with no avail. So I'm wondering what I'm doing wrong, or if this is even possible as I haven't found any documentation on it. Code and Codepen provided below. Thanks for any help/advice!
HTML:
<div id="root"></div>
CSS:
input[type='range'] {
-webkit-appearance: none;
background-color: #ddd;
height: 10px;
overflow: hidden;
width: 300px;
border-radius: 5px;
outline: none;
}
input[type='range']::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 10px;
}
input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
--slider-thumb-background-color: #000;
background: var(--slider-thumb-background-color);
border-radius: 50%;
--box-shadow-color: orange;
box-shadow: -205px 0 0 200px var(--box-shadow-color);
cursor: pointer;
height: 10px;
width: 10px;
--border-color: orange;
border: 3px solid var(--border-color);
}
input[type='range']::-webkit-slider-thumb:hover::after {
content: '';
height: 10px;
width: 10px;
border-radius: 5px;
color: yellow;
}
input[type='range']::-webkit-slider-thumb:hover {
--slider-thumb-background-color: grey;
--box-shadow-color: red;
--border-color: red;
}
input[type='range']::-webkit-slider-thumb:active {
--slider-thumb-background-color: white;
--box-shadow-color: blue;
--border-color: blue;
}
input[type='range']::-webkit-slider-thumb:focus {
--slider-thumb-background-color: white;
--box-shadow-color: yellow;
--border-color: yellow;
}
input[type='range']::-webkit-slider-thumb:hover:after {
border: 10px solid rgb(111, 111, 0.4);
overflow: auto;
postion: fixed;
}
input[type='range']::-moz-range-thumb {
background: #333;
border-radius: 50%;
box-shadow: -1005px 0 0 1000px red;
cursor: pointer;
height: 10px;
width: 10px;
border: 0;
}
JS(Babel)
class VolumeSlider extends React.Component {
constructor() {
super();
this.state = {
value: 120.5
};
}
onUpdate(e) {
this.setState({
value: e.target.value
});
}
render() {
return (
<div>
<div className="mb1">
<input
className="c-input--range"
list="tickmarks"
max={1200}
onChange={(e) => this.onUpdate(e)}
step={0.1}
type="range"
value={this.state.value}
/>
<div>
<label className="c-label">{this.state.value}c</label>
</div>
</div>
</div>
);
}
}
ReactDOM.render(
<div>
<VolumeSlider />
</div>,
document.getElementById("root")
);
https://codepen.io/kcandle/pen/KKMrZKo
Look at this pen hope this is what you're looking for, explanation:
i've added the after with position absolute made the input relative position made the after 1px X 1px, made inset then translated X axis from 0 to whatever value i want.
input[type='range']::after{
content: "";
position: absolute;
top: 0px;
left: 0px;
border-radius: 50%;
visibility: hidden;
width: 1px;
height: 1px;
box-shadow: 0 0 10px 5px #fff, inset 0 0 10px 5px #fff;
}
input[type='range']:hover::after{
visibility: visible;
animation: wave 2s forwards;
}#keyframes wave {
0% {
transform:translateX(0);
}
100% {
transform:translateX(500px);
}
}
https://codepen.io/headsick/pen/xxOMXqw
Related
I am trying to float the labels onfocusing input in angular.
I did wrote code to perform the action of a class to be applied on focusing the input, & then focus out to check empty value or values present, to remove the applied class.
forms.component.html
<div class="forms-field-box">
<div class="forms-field-inp-box">
<input id="forms_field_inp_fn" class="forms-field-inp" type="text" (focus)=inpAnim();>
<label for="forms_field_inp_fn" id="forms_input" class="forms-field-inp-lbl">
FirstName
</label>
</div>
</div>
<div class="forms-field-box">
<div class="forms-field-inp-box">
<input id="forms_field_inp_ln" class="forms-field-inp" type="text" (focus)=inpAnim();>
<label for="forms_field_inp_ln" id="forms_input" class="forms-field-inp-lbl">
LastName
</label>
</div>
</div>
<div class="forms-field-box">
<div class="forms-field-inp-box">
<input id="forms_field_inp_p" class="forms-field-inp" type="text" (focus)=inpAnim();>
<label for="forms_field_inp_p" id="forms_input" class="forms-field-inp-lbl">
Password
</label>
</div>
</div>
<div class="forms-login-btn">
Login
</div>
forms.component.scss
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.forms-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
background-color: #ffffff;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
min-height: 120px;
padding: 20px;
border-radius: 5px;
}
.forms-field-box {
background-color: #ffffff;
margin-bottom: 15px;
}
.forms-field-inp-box {
width: 97%;
position: relative;
}
.forms-field-inp {
width: 100%;
height: 35px;
border-radius: 5px;
border: 1px solid #e4e4e4;
outline: none;
padding: 6px;
}
.forms-field-inp:hover {
border: 1px solid #cccccc;
}
.forms-field-inp:focus {
border: 1px solid #0089ff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.forms-field-inp-lbl {
position: absolute;
top: 8px;
left: 10px;
font-size: 14px;
font-weight: 600;
background-color: #ffffff;
padding: 2px 6px;
user-select:none;
color: #cccccc;
}
.forms-field-inp-lbl-anim ~ .forms-field-inp-lbl {
top: -9px;
}
.forms-login-btn {
width: 20%;
height: 35px;
text-align: center;
font-size: 18px;
padding: 5px;
background-color: blue;
border: 1px solid blue;
border-radius: 5px;
margin: 10px auto;
cursor: pointer;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
forms.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-forms',
templateUrl: './forms.component.html',
styleUrls: ['./forms.component.scss']
})
export class FormsComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
}
inpAnim(){
let forms_input_ele:any = document.querySelector(".forms-field-inp-box input");
forms_input_ele.addEventListener("focusin", () => {
console.log("focussed in");
forms_input_ele.classList.add("forms-field-inp-lbl-anim");
} );
forms_input_ele.addEventListener("focusout", () => {
let forms_inp_val = forms_input_ele.value;
if(forms_inp_val == ""){
forms_input_ele.classList.remove("forms-field-inp-lbl-anim");
console.log("focussed out");
console.log(forms_inp_val);
}
});
}
}
Please Help me to solve this.
input focused & label floated
input has value & label stays
Problem: But, the first input only works, other inputs not working if focused & nothing happens.,
Next input is focused, but label not floating
This can be easily applied by css, but need to make this small code to work correctly
First of all, give thanks for reading my question and try to help me and apologize for my English.
I would like to have a space between search content that contains and input with datalist, but I don't know why I can't create that space.
Can someone help me, please??
Here is my code:
render() {
const { value } = this.state;
return (
<div className="search search__content">
<div className="inner-addon left-addon">
<i className="icon-search search-icon"></i>
<input onChange={this.handleSearch} type="text" placeholder="Search..." value={value} list="list_languages" autoComplete="on" />
<datalist id="list_languages">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
<option>Java</option>
<option>Ruby</option>
<option>PHP</option>
<option>Go</option>
<option>Erlang</option>
<option>Python</option>
<option>C</option>
<option>C#</option>
<option>C++</option>
<option>HTML</option>
</datalist>
</div>
</div>
);
}
And here is my CSS:
.search {
height: 200px;
padding: 10px;
position: absolute;
z-index: 999;
top: 0;
right: 0px;
&__content {
top: 200px;
left: 320px;
width: 500px;
height: 50px;
background-color: #fff;
border-radius: 34px;
box-shadow: 0px 0px 12px rgba(0,0,0,0.3);
input {
width: 450px;
height: 30px;
background: transparent;
border: 0;
display: block;
padding: 10px 32px 10px 20px;
font-size: 14px;
color: #000;
border-radius: 34px;
border: none;
outline: none;
}
datalist {
// why doesn't work?
top: 50px;
margin-top: 50px;
}
input::-webkit-calendar-picker-indicator {
display: none;
}
.input-field input.placeholder {
color: #ccc;
font-size: 14px;
}
.search-icon {
// color: #576a8b;
color: #000;
font-size: 20px;
}
.search-icon:hover {
cursor: pointer;
color: gray;
}
.inner-addon {
position: relative;
left: 10px;
}
.inner-addon i {
position: absolute;
}
.left-addon i { left: 0px;}
.left-addon input { padding-left: 30px; }
}
}
Thanks a lot!! Finally I use padding to move text up but move input down and leave a little space between text and options.
JAVASCRIPT CODE:
render() {
const { value, options } = this.state;
return (
<div className="search search__content">
<div className="inner-addon left-addon">
<input onChange={this.handleSearch} onKeyDown={this.handlePressEnter} type="text" placeholder={PLACEHOLDER} value={value} list="list_languages" autoComplete="on" />
<div className="datalist">
<datalist id="list_languages">
{ options && options.length > 0 && options.map( (option, index) => {
return (
<option value={option.nombre} key={index} />
);
})}
</datalist>
</div>
</div>
</div>
);
}
CSS:
.search {
height: 200px;
position: absolute;
z-index: 999;
top: 0;
right: 0px;
&__content {
top: 200px;
left: 320px;
width: 430px;
height: 50px;
background-color: #fff;
border-radius: 34px;
box-shadow: 0px 0px 12px rgba(0,0,0,0.3);
input {
width: 380px;
height: 50px;
background: transparent;
border: 0;
display: block;
padding: 0px 32px 10px 10px;
font-size: 14px;
color: #000;
border-radius: 34px;
border: none;
outline: none;
}
input::-webkit-calendar-picker-indicator {
display: none;
}
.input-field input.placeholder {
color: #ccc;
font-size: 14px;
}
.inner-addon {
position: relative;
top: 5px;
left: 22px;
}
// .search-icon {
// // color: #576a8b;
// color: #000;
// font-size: 20px;
// }
// .search-icon:hover {
// cursor: pointer;
// color: gray;
// }
// .inner-addon i {
// position: absolute;
// }
// .left-addon i { left: 0px;}
// .left-addon input { padding-left: 30px; }
}
}
the datalist element has very little flexibility in styling. You cannot style datalist just like select elements.
https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms#The_ugly
Some elements simply can't be styled using CSS. These include: all
advanced user interface widgets, such as range, color, or date
controls; and all the dropdown widgets, including <select>, <option>,
<optgroup> and <datalist> elements. The file picker widget is also
known not to be stylable at all. The new and
elements also fall in this category.
Browsers define their own styles for these elements.
if you need more options you can use libs like react-select
I have a pen, which is basically a todo app. The todo items are actually li elements which have text, button and a hr. Some of them are having hr with spaces inside them while some doesn't.
Image:
HTML:
const j = $;
j(() => {
let validify = txt => {
if (txt.length > 0) {
j('#ctn').append(`<li class='td'>${txt}<button class='td-btn'>Dismiss</button><hr/></li>`);
}
j('.td-btn').on('mouseenter', function() {
console.log('added');
j(this)
.parent()
.addClass('del');
console.log(j(this).parent().attr('class'))
}).on('mouseleave', function() {
console.log('removed')
j(this)
.parent()
.removeClass('del');
}).on('click', function() {
j(this).parent().css('display', 'none');
});
j('#addtd').val('');
}
validify('');
j('#btn').on('click', () => {
validify(j('#addtd').val());
});
});
#import url("https://fonts.googleapis.com/css?family=Lato");
* {
box-sizing: border-box;
font-family: Lato;
}
body {
margin: 0;
padding: 3vh 7vw;
background: #004D40;
}
#in-ctn {
position: fixed;
width: 86vw;
height: 16vh;
background: #388E3C;
box-shadow: 0 6px 9px #272727;
z-index: 2;
}
#btn {
position: absolute;
border-radius: 100%;
outline: none;
border: none;
right: 7vh;
top: 3vh;
width: 10vh;
height: 10vh;
font: 500 8vh arial;
display: inline-block;
transition: 0.25s all;
background: #CDDC39;
}
#btn:hover {
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.33);
transform: scale(1.1);
}
#btn:active {
transform: translateY(4px);
}
#addtd {
position: absolute;
outline: none;
border: none;
background: rgba(255, 255, 255, 0.33);
width: 50vw;
height: 6vh;
top: 5vh;
left: 5vw;
font: 500 14pt Lato;
padding: 0 10px;
}
#addtd::placeholder {
color: #FFF;
}
#ctn {
position: absolute;
top: 27vh;
width: 86vw;
background: #388E3C;
box-shadow: 0 6px 9px #272727;
padding: 3vh 5vw;
z-index: 1;
}
li.td {
font: 500 20pt Lato;
list-style: none;
color: #FFF;
}
button.td-btn {
float: right;
outline: none;
border: none;
background: #E53935;
height: 20px;
position: relative;
top: 25px;
color: #FFF;
}
hr {
border: 7px solid #9E9D24;
padding: 0;
}
.del {
color: #CDDC39 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'>
<div id='in-ctn'>
<button id='btn'>+</button>
<input type='text' id='addtd' placeholder='Enter a new Todo' />
</div>
<div id='ctn'>
<li class='td'>
Code a Todo App
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Style the Elements
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Debug some problems
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Go for a walk
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
</div>
</div>
Can anyone explain me why it is so?
This is happening due to CSS Sub pixel rendering.
When you zoom-in/out of the browser, the rescaled elements will have left over pixel values like 5.75px etc. The vendor decides how to deal with that.
In your case the easiest fix, at least in Chrome, is to cancel the border radius to 0px, instead set the height of the hr to double the border and give it a background color:
border: 0px solid #9E9D24;
padding: 0;
height: 14px;
background: #9E9D24;
Seems like this issue is browser related, since it works fine for most people. Possibly your browser has a default styling for hr elements. It is, however, nowadays bad practice to use a horizontal line for presentational terms. Source
You would be fine by using a border-bottom on your li element. If you want to position the border lower than the default position, you can use padding-bottom on the li element. Your HTML structure also looks a lot more clear with this.
For example, changing the styling of your CSS selector li.td to the following could do the trick:
li.td {
font: 500 20pt Lato;
list-style: none;
color: #CDDC39;
border-bottom: 10px solid #9E9D24;
padding-bottom: 10px;
margin-bottom: 10px;
}
In case you really need to use the hr element, you could attempt to remove all default margin since some browsers add a margin by default. For that, add the following styling to the element:
margin: 0
which would result into
hr {
border: 7px solid #9E9D24;
padding: 0;
margin: 0;
}
Did you edit your pen to fix the issue? When looking at your pen preview all <hr> tags are rendered without an empty space inside.
The only suggestion I have, is that in HTML <hr> doesn't need to be explicitly closed, unless you are using XHTML, then you need to properly close the tag <hr />. Since you are just writing HTML, I would go with the <hr>.
What is the best way to reverse css styling on the second on click?
What I'd like to happen is when the user clicks on the button again, it will just reverse everything to the original position. I'm not sure what's the most efficient way to do this without re-declaring everything in reverse. Especially that there's not just one class that changes status.
HTML:
<div class="wrapper-available">
<a class="available">Available</a>
<div class="available-img"><img src="http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-california-spangled-cat.jpg" width="40" height="40"></div>
</div>
CSS:
.wrapper-available {
display: inline-block;
margin-top: 40px;
position: relative;
}
.available {
border-radius: 15px;
padding: 5px 20px 5px 50px;
background: #39b54a;
color: #FFF;
display: inline-block;
font-weight: bold;
}
.available-img {
left: 0;
position: absolute;
top: -12px;
transition: all .20s ease-in;
}
.available-img img {
border-radius: 30px;
border: 2px solid #39b54a;
}
jQuery:
$(".available").click(function() {
$(this).css({ "background" : "#CCC", "padding" : "5px 50px 5px 20px" }).text("Away");
$(".available-img").css({
"left": 100
});
$(".available-img img").css({
"border" : "2px solid #CCC"
});
});
http://codepen.io/aguerrero/pen/ORKjya
The simplest way would be to toggle a class on the wrapper-available instead of adding inline styling and to also toggle the text() within the .available element. Try this:
$(".available").click(function() {
$(this).text(function(i, t) {
return t == 'Available' ? 'Away' : 'Available';
}).closest('.wrapper-available').toggleClass('away');
});
.wrapper-available {
display: inline-block;
margin-top: 40px;
position: relative;
}
.available {
border-radius: 15px;
padding: 5px 20px 5px 50px;
background: #39b54a;
color: #FFF;
display: inline-block;
font-weight: bold;
}
.wrapper-available.away .available {
background-color: #CCC;
padding: 5px 50px 5px 20px;
}
.available-img {
left: 0;
position: absolute;
top: -12px;
transition: all .20s ease-in;
}
.wrapper-available.away .available-img {
left: 70px; /* note 70px seems to work better than 100px here */
}
.available-img img {
border-radius: 30px;
border: 2px solid #39b54a;
}
.wrapper-available.away .available-img img {
border: 2px solid #CCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper-available">
<a class="available">Available</a>
<div class="available-img">
<img src="http://www.petmd.com/sites/all/modules/breedopedia/images/thumbnails/cat/tn-california-spangled-cat.jpg" width="40" height="40">
</div>
</div>
I added three classes in your CSS document with the styling that you added in your jQuery snippet. Now, instead of updating the specific styling for each element via jQuery you can just specify the new styling in your three selectors with the .active class.
CSS:
.available.active {
background: #CCC;
padding: 5px 50px 5px 20px;
}
.available-img.active {
left: 100px;
}
.available-img.active img {
border: 2px solid #CCC;
}
The jQuery snippet now toggles the .active class on your desired elements. These two:
<a class="available">Available</a>
<div class="available-img">
$(this).text() now toggles between Available and Away.
jQuery:
$('.available').click(function() {
$(this).toggleClass('active').siblings().toggleClass('active');
$(this).text(function(i, text) {
return (text === 'Available') ? 'Away' : 'Available';
});
});
Example: http://codepen.io/praktikdan/pen/wzVrGM
I have a toggle button that has been coded up, but I dont think its good to use in my form, since its a pretty bad hacky code to select either option.
Is there a better/efficient way to code this toggle button instead? I am not good with jQuery, so any help with provided functionality would be helpful.
If there is also a way of programming it to slide the toggle left/right instead of clicking left/right would be great also.
I have also attached these images to show the behaviour of how it should function:
toggle behaviour diagram
current html file(below) button look for left/right toggle buttons
Any questions, please ask...
<html>
<head>
<style>
#toggle-slide {
border: 4px #303F9F solid;
border-radius: 5px;
display: flex;
width:300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
}
#toggle-slide div {
flex:1;
padding: 10px 20px;
}
#toggle-option-0 {
background-color:#3F51B5;
}
#toggle-option-1 {
background-color:white;
}
</style>
<script>
function toggle() {
realToggle = document.getElementById('real-toggle');
if (realToggle.value == 0) {
realToggle.value=1;
document.getElementById('toggle-option-0').style.backgroundColor='#3F51B5';
document.getElementById('toggle-option-1').style.backgroundColor='#FFF';
} else {
realToggle.value=0;
document.getElementById('toggle-option-0').style.backgroundColor='#FFF';
document.getElementById('toggle-option-1').style.backgroundColor='#3F51B5';
}
}
</script>
</head>
<body>
<div id='toggle-slide' onclick='toggle()'>
<div id='toggle-option-0' class='active'>Private</div>
<div id='toggle-option-1'>Public</div>
<input id='real-toggle' type=hidden name=private value=1 />
</div>
</body>
</html>
A pure CSS version:
On the following snippet there's a hidden checkbox that becomes checked/unchecked when the content in label is clicked. Using the CSS :checked selector, the #background position is changed from 0% to 50% and it's color changes from red to blue.
The background is separated from the text and set with position:absolute (to be easily moved) plus z-index:-1 (which brings it to behind the subtitles). A CSS transition added on the #background animates the changes on it's position/color.
.toggle-slide {
border: 4px #555 solid;
border-radius: 5px;
display: flex;
width: 300px;
color: white;
font-weight: 700;
text-align: center;
cursor: pointer;
position: relative;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none;
}
.toggle-slide .subtitle {
flex: 1;
padding: 10px 20px;
}
#background {
width: 50%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
background-color: tomato;
-webkit-transition: all 0.6s; /* Safari */
transition: all 0.6s;
-webkit-transition-timing-function: cubic-bezier(0.2,1,0.2,1);
transition-timing-function: cubic-bezier(0.2,1,0.2,1);
}
input[type=checkbox] {
display: none;
}
#real:checked ~ label #background {
background-color: skyblue;
left: 50%;
}
<input id=real type=checkbox name=real />
<label class=toggle-slide for=real>
<div id=background></div>
<div class=subtitle>Private</div>
<div class=subtitle>Public</div>
</label>
You can do this completely in pure css, but since you were asking for jQuery...
$(document).ready(function() {
$('.input-button').click(function() {
if ($('.public').hasClass('selected')) {
$('.public').removeClass('selected');
$('.private').addClass('selected');
$('.slider').stop().animate({
left: '48%'
}, 200);
} else {
$('.private').removeClass('selected');
$('.public').addClass('selected');
$('.slider').stop().animate({
left: '2%'
}, 200);
}
});
});
html,
body {
padding: 0;
margin: 0;
}
.input-button {
width: 200px;
height: 40px;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -20px;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #FFF;
background-color: #2E86AB;
border-radius: 4px;
line-height: 40px;
font-family: sans-serif;
-webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
span {
width: 50%;
height: 100%;
float: left;
text-align: center;
cursor: pointer;
-webkit-user-select: none;
}
.input-button div {
width: 100px;
height: 85%;
top: 50%;
left: 2%;
transform: translateY(-50%);
position: absolute;
background-color: #FFF;
border-radius: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='input-button'>
<div class='slider'></div>
<span class='private'>Private</span>
<span class='public selected'>Public</span>
</div>
Here is a good example of what you were trying to create
jQuery on-off-switch.js Plugin
It also implemented with jQuery and supports the sliding on drag functionality.
How to use the plugin