I'm looking to create a custom checkbox!
<label id="sliderLabel">
<input type="checkbox" />
<span id="slider">
<span id="sliderOn">SELECTED</span>
<span id="sliderOff">SELECT</span>
<span id="sliderBlock"></span>
</span>
</label>
However, when I try to increase the width of the checkbox, it doesn't work as expected. You can view my code on jsfiddle
Try checking out this JSFiddle link for the solution: jsfiddle.net/RUvhw/3/
It appears that you didn't create this code yourself. You may need to adjust the values to achieve the desired sizes.
Please update the width and left values accordingly. I have made some modifications to your question/answer.
http://jsfiddle.net/Pfxe6_updated/
p {
margin: 10px;
}
#sliderLabel {
border: 1px solid #a2a2a2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
display: block;
height: 30px;
margin: 20px auto;
overflow: hidden;
position: relative;
width: 200px;
}
#sliderLabel input {
display: none;
}
#sliderLabel input:checked + #slider {
left: 0px;
}
#slider {
left: -100px;
position: absolute;;
top: 0px;
-moz-transition: left .25s ease-out;
-webkit-transition: left .25s ease-out;
-o-transition: left .25s ease-out;
transition: left .25s ease-out;
}
#sliderOn, #sliderBlock, #sliderOff {
display: block;
font-family: arial, verdana, sans-serif;
font-weight: bold;
height: 30px;
line-height: 30px;
position: absolute;
text-align: center;
top: 0px;
}
#sliderOn {
background: #3269aa;
background: -moz-linear-gradient(top, #3269aa 0%, #82b3f4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3269aa), color-stop(100%,#82b3f4));
background: -webkit-linear-gradient(top, #3269aa 0%,#82b3f4 100%);
background: -o-linear-gradient(top, #3269aa 0%,#82b3f4 100%);
background: -ms-linear-gradient(top, #3269aa 0%,#82b3f4 100%);
background: linear-gradient(top, #3269aa 0%,#82b3f4 100%);
color: white;
left: 0px;
width: 100px;
}
#sliderBlock {
background: #d9d9d8;
background: -moz-linear-gradient(top, #d9d9d8 0%, #fcfcfc 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d9d9d8), color-stop(100%,#fcfcfc));
background: -webkit-linear-gradient(top, #d9d9d8 0%,#fcfcfc 100%);
background: -o-linear-gradient(top, #d9d9d8 0%,#fcfcfc 100%);
background: -ms-linear-gradient(top, #d9d9d8 0%,#fcfcfc 100%);
background: linear-gradient(top, #d9d9d8 0%,#fcfcfc 100%);
border: 1px solid #a2a2a2;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radisu: 3px;
height: 28px;
left: 100px;
width: 100px;
}
#sliderOff {
background: #f2f3f2;
background: -moz-linear-gradient(top, #8b8c8b 0%, #f2f3f2 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8b8c8b), color-stop(50%,#f2f3f2));
background: -webkit-linear-gradient(top, #8b8c8b 0%,#f2f3f2 50%);
background: -o-linear-gradient(top, #8b8c8b 0%,#f2f3f2 50%);
background: -ms-linear-gradient(top, #8b8c8b 0%,#f2f3f2 50%);
background: linear-gradient(top, #8b8c8b 0%,#f2f3f2 50%);
color: #8b8b8b;
left: 200px;
width: 100px;
}
I'm fairly new to Angular development and currently working on creating a registration form. I need the form to have two columns in a row, with fields like Firstname and Lastname in one row, followed by Phone, Email, Password, and Confirm Password in ...
I am experiencing an issue with my ajax form in struts2. It only seems to work with the first link, while the rest remain inactive. Here is the code snippet from the JSP page: <s:iterator value="listlog" status="incr"> <tr> ...
Hey guys, I came across an issue with my jQuery code. I tried using jQuery: slideUp() delay() then slideDown; not working, and here is the exact code snippet: $('.flash_message').slideDown(800).delay(5000).slideUp(1000); However, the slideDown ...
Is there a way to attach a click function to <li> elements that do not possess a specific class? I am looking to achieve something along the lines of: $('ul.listClass li a :not(li.thisLi)').on("click")... ...
Take a look at this code snippet: $("#test").on("keyup", (e) => { if(e.target.value.length === 3) { setTimeout(() => { console.log("fired") }, 2000) } }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.m ...
Currently, I have a loop in my code that checks the id of the last div on the page and uses AJAX to replace it with an updated div. However, if the loop runs again and the id remains the same, it just adds another duplicate of the updated div. My goal is ...
For my react project, I am utilizing material-Ui and I am looking to have a placeholder that stands out by having grey text instead of black when compared to the selected item. <Select name="answer" value={values.answer} onChange={handleChange} onBlur= ...
Is it possible to change the color of the asterisk that indicates required fields on all forms across my site without having to wrap it in a div or another wrapper? ...
I currently have 2 pages: page1.html, which contains a series of links, and page2.html, where an Accordion is located. The Query: I'm wondering if it's feasible to link directly to a specific section within the Accordion. For instance, if I want ...
Looking to reformat JSON data? [{"name":"age","value":31}, {"name":"height (inches)","value":62}, {"name":"location","value":"Boston, MA"}, {"name":"gender","value":"male"}] If you want it to be in a different format: [{"age": 31}, {"height (inches)": 6 ...
As a beginner HTML5 developer, I have been exploring ways to create an animated image using multiple jpg files stored in a specific folder on my website. My goal is to design an animation of a rabbit running across the page when a user clicks on a button. ...
What are the advantages of using the nth function in CSS instead of applying it through jQuery, especially considering its compatibility with IE? Is it better to simply use jQuery from the start and avoid using it in a stylesheet altogether? Hopefully thi ...
I'm currently working on creating a dynamic filter bar integrated with a search functionality. My data is stored in JSON format, including details such as artist name, title, source, and more. Despite successfully retrieving results through console.lo ...
Currently delving into the world of Ajax, I've been following a tutorial and have crafted the script below: <!DOCTYPE html> <html> <head> <script type="text/javascript"> function MyFunction(){ var xmlhttp; if(windo ...
I am looking to retrieve data by clicking a link. Here are the links available: <a class="note" id="' . $data["p_id"] . '" value="1" href="javascript:void(0)">+1</a> <a class="note" id="' . $data["p_id"] . '" value="-1" ...
I am new to using HTML with JavaScript. I attempted to implement a datepicker, but unfortunately, it is not working as expected. The error message I am receiving is '$(...).datepicker is not a function' in the console. I am utilizing multiple f ...
After extensively researching, I have come across numerous articles advocating for the use of transform and opacity for achieving smooth CSS transitions. An example can be found here: The prevailing notion always revolves around: ...the optimization ...
Currently, I am working with sass and finding it challenging to modify the structure of the page easily. The layout I have in place is due to my header having varying sizes depending on the specific page users are browsing: <div class="container"> ...
Apologies in advance for the lengthy post, but I welcome any suggestions and ideas. Thank you! I'm facing an issue with my layout breaking when the screen size is below 1200px (images and text drop down). I don't mind if they stack vertically on ...
I'm seeking assistance with sorting arrays in JavaScript. Here is an example of a sorted array: mainArray : [25 20 20 20 18 17 17 15 12 12 10 5 5 ] The mainArray may contain duplicate values. A. Dealing with duplicates Based on user input, I need ...