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 am attempting to implement a CSS animation using three files. Below is the HTML file: <html lang="en"> <head> <link rel="stylesheet" type="text/css" class = "tag" href="../css/style.css" ...
This code snippet involves a function that starts with a synchronous comparison test == 0. If the comparison is true, it returns one piece of content; however, if it's not, an asynchronous request is made. The goal here is for the latter part to retur ...
I'm currently working on a custom wordpress theme and I've encountered an issue that I need help with. I want to have a wide background image on my homepage with text centered on it, but I also want the height to remain the same as the browser w ...
Currently, I am in the process of developing a nodeJS application utilizing Express, MongoDB, and EJS template view engine. The server.js file has been successfully created to establish the server. In addition, a separate header.ejs file has been implement ...
I am experiencing an issue with displaying the most recent events from my database using PHP. The Bootstrap framework and CSS are causing them to appear as a single column on the page, but I would like them to be displayed in rows of three. I have attempt ...
Running a MediaWiki site with a personalized skin, I've noticed that the CSS code from my custom skin is being overshadowed by the default MediaWiki CSS. Is there a way to modify the sequence in which the CSS code is loaded? ...
Struggling with AngularJS, I can't seem to find a simple solution for this problem. In my code, there's a div element with the overflow: hidden property set due to an internal scrollbar. Inside this div, there's a dropdown menu that is trigg ...
After storing an object template in a variable, I am using jQuery to add video links. This is being done in preparation for adding the links into the object template through ajax in the future. However, the video is not appearing as expected and I'm ...
I am struggling to figure out how to move this div to the bottom. Additionally, I want to create temporary pop-up squares (simple divs) in random directions that will disappear after 50ms. My attempt to float this box to the bottom did not yield the desir ...
Throughout a 6-month-long project, I have continuously added new URLs. However, I am now encountering an issue when using the extend 'base.html' function on other pages where the CSS overlaps and creates confusion. My question is: What are the b ...
I need some assistance with correctly parsing the REL attribute on A tags. I have already figured out how to match most XFN values, but there are two that I'm struggling with: "co-worker" and "co-resident". The hyphen seems to be causing an issue with ...
I need to display all products that a client has ordered from the database and I want to be able to show/hide them when clicking on a specific div element. http://prntscr.com/7c5q6t Below is my PHP code which displays all the ordered products: <td cla ...
As a newcomer to jquery mobile, I am still learning how ajax handles page transitions, and I suspect the issue may be related to that. In my jqm / phonegap app, I have set up multiple pages. The homepage checks if the user is logged in by retrieving membe ...
Can someone help me figure out how to make my iframe content fill the entire screen? Any assistance would be greatly appreciated. Photos: Current Output: Desired Output <!DOCTYPE html> <html lang="en"> ...
Hello, I am trying to load a page from index.html using the following code: <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.2.min.js"></script> <script> function jsonCallback(json){ console.log(json); alert(document.c ...
In my HTML table, there is a specific column filled with container numbers that I want to copy to the clipboard when a button is clicked. The column has the class ".container" Here is the code I have been working on. HTML: <button onclick="copyToC ...
Below is the table structure: <table> <tr> <th>row1</th> <th><input type="text"></th> <th><input type="text"></th> <th><input type="text"></th& ...
Currently, I am facing an issue where the dataTable paginates and removes the DOM pages along with the data. My goal is to extract all the data from the dataTable and convert it to JSON without losing access to the DOM when pagination occurs. I want to m ...
Is there a search jQuery plugin that enables real-time filtering based on Div ID as you type in the search box? It would be great if the filter instantly refreshes. ...
My jQM app consists of numerous pages, and I am in the process of upgrading it to jQM 1.4. In order to comply with the new guidelines for 1.4, I am implementing the latest widgets/methods and eliminating all deprecated code. Let's consider a specific ...