Hoping this is fairly simple and I've just overlooked something...
I currently have a page with a bunch of checkbox options. Each checkbox will execute a very simple script adding its value to a string, where it then gets passed over to PHP to do the rest.
The html part for the checkboxes looks like this (repeated for multiple years):
<input type="checkbox" value="2017" class="value_year" onclick="filterdb()" />2017
And the script looks like this:
var year = [];
$('.value_year').each(function(){
if($(this).is(":checked"))
{
year.push($(this).val());
}
});
year = year.toString();
This works perfectly for a checkbox. However, I'm giving the site a makeover now and want to replace checkboxes with regular 'a' links, that I've styled up in CSS to look much prettier when selected/unselected. The problem is I can't figure out how to replicate the behaviour of the script when clicking the link as opposed to checking a checkbox.
The html for the new link looks like this:
<a class='filter value_year' id='filter2017' value='2017' onclick='filterdb()' href='javascript:void(0);'>2017</a>
Is there a simple way to adapt the script to work here?
Many thanks
Don't use an <a>nchor, value isn't supported, it's type of interaction is different than a form control, stick to what you already have. Just hide the checkboxes (they are pain to style) and add a <label> for each checkbox.
In the example below, each <label> is associated to the <input> positioned before it. When a <label> is associated with an <input>, the <label> becomes an extension to the <input> -- clicking the <label> causes the associated <input> to act as it was clicked as well. This association is enabled by assigning the <label> the following:
<label for="ID_of_input_it_is_associated_with"></label>
The JavaScript can stay as it is, in the example, it is modified as an event handler for demo purposes, but there's no harm in using it if it actually serves your purposes.
CSS has details commented in example. Note: hiding checkboxes and a few other rulesets are valid but they are not good for accessibility. Seeing that you're new to this facet, that concern is probably not a factor yet.
let years = [];
$('.year').on('change', function() {
years.length = 0;
$('.year').each(function() {
if ($(this).is(':checked')) {
years.push($(this).val());
}
});
console.log(years.toString());
});
/* ✣ Not good for accessability */
html {
font: 2ch/1.25 Consolas
}
/* Each checkbox is hidden ✣ */
.year {
display: none;
}
label {
display: inline-block;
font: inherit;
margin: 2px;
padding: 2px 4px;
color: navy;
border: 1px groove rgba(129, 129, 129, 0.3);
border-radius: 6px;
cursor: pointer;
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
/*
These two rules remove the
highlighting for Chrome and
Android ✣
*/
-webkit-tap-highlight-color: transparent;
user-select: none;
}
/*
The "+" means apply styles to <label>
if there is a ".year" that is ":checked"
positioned before it.
Google "adjacent sibling combinator"
*/
.year:checked+label {
color: cyan;
background: #000;
}
.year:checked+label:hover {
color: lightblue;
background: rgba(0,0,0,0.5);
}
label:hover,
label:active {
color: white;
background: rgba(51, 51, 51, 0.4);
}
label:active {
transform: scale(0.90);
transform-origin: center;
transition: all 0.3s ease-out;
}
/* Remove Chrome blue outline ✣ */
:focus {
outline: none !important;
}
/*
Demo purposes only -- styles for console
*/
.as-console-row::after { width: 0; font-size: 0; }
.as-console-row-code { width: 100%; word-break: break-word; }
.as-console-wrapper { max-height: 50% !important; max-width: 100%; }
<input id='chx1' class='year' type='checkbox' value='2017'>
<label for='chx1'>2017</label>
<input id='chx2' class='year' type='checkbox' value='2018'>
<label for='chx2'>2018</label>
<input id='chx3' class='year' type='checkbox' value='2019'>
<label for='chx3'>2019</label>
<input id='chx4' class='year' type='checkbox' value='2020'>
<label for='chx4'>2020</label>
<input id='chx5' class='year' type='checkbox' value='2021'>
<label for='chx5'>2021</label>
<input id='chx6' class='year' type='checkbox' value='2022'>
<label for='chx6'>2022</label>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
If you insist on using <a> elements as your option switches (see #RobinZigmond and my comments above) then maybe this might be helpful:
var year = [];
document.querySelectorAll("a.value_year").forEach(l=>l.onclick=ev=>{
ev.preventDefault();
l.classList.toggle("checked");
console.log([...document.querySelectorAll("a.value_year.checked")].map(l=>l.getAttribute('href')).join(","));
})
.checked {color:red}
<a class='filter value_year' href='2017'>2017</a>
<a class='filter value_year' href='2018'>2018</a>
<a class='filter value_year' href='2019'>2019</a>
<a class='filter value_year' href='2000'>2020</a>
The click handler for the a.value_year elements does two things:
it sets the checked class for the clicked element
it loops over all a.value_year.checked elements and collects all their .href attribute values into an array.
Related
https://hrx66w.csb.app/
How to customize styles for this slider selected range color & pointer color ?
<input
ref={this.inputRef}
id="sliderId"
className="inputR w-100"
name="sliderName"
type="range"
min={minValue}
max={maxValue}
value={this.state.value}
onChange={this.handleChange(minValue, maxValue)}
style={styleInput}
/>
Use accent-color in your css file
// Example
.inputR {
accent-color: red;
}
This is good for styling inputs type range, checkbox, radio and progress.
https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color
From your example, I can say that the style you have applied is overridden by browser. To counter that, you should reset all styles for the slider before any customization. You can add this to your styles.
.inputR {
-webkit-appearance: none;
}
.inputR:focus {
outline: none;
}
.inputR::-webkit-slider-thumb {
-webkit-appearance: none;
border-radius: 50%;
background: rgba(179, 35, 179, 0.75);
height: 16px;
}
This question already has answers here:
How do I add a "search" button in a text input field?
(7 answers)
Closed 5 years ago.
Here is the HTML form:
<form method="post" action="search.php">
<input type="text" id="inputSearch"/>
</form>
And some CSS:
#inputSearch {
padding:18px 15px 18px 52px;
font-size:1rem;
color:#1f5350;
border:none;
/*defining background image as a search symbol*/
background: #7accc8 url(search.png) 8px 14px no-repeat;
background-size:25px 26px;
}
The search icon is just a static image. Using JavaScript, how can I grab the CSS background-image and use it to create a clickable submit button without adding further HTML code?
You can wrap your search icon in <a></a> tags, that way your image will be clickable and can take the user to the page you want once he clicks on it: Here's an example:
<div class="maindiv">
<form id="myform" name="myform" method="post" action="schitems.php">
<input type="search" id="itemcd" name="itemcd" class="inputfields" placeholder="Type an Ingredient..." />
<img src="search_icon.jpg" alt="search">
</form>
</div>
What you're trying to achieve can't actually be accomplished with raw CSS; you need to use JavaScript and attach a click event handler to the element.
Unfortunately, considering you're making use of background-image, your image is essentially 'part of' the whole <input> element itself, and as far as I'm aware, you can't separate out the click functionality (without making use of a separate element for the image).
Having said that, you can make it so that the form submits when any part of the <input> is clicked on with the following. This can be improved by double-checking that there is actually content entered into the input before allowing the form submission to fire:
var form = document.getElementById('myform');
var input = document.getElementById('itemcd');
input.onclick = function() {
if (this.value.length > 0) {
form.submit();
}
}
#myform {
width: 260px;
margin: 0 auto;
}
input[type="search"] {
padding: 18px 15px 18px 52px;
font-size: 1rem;
color: #1f5350;
/*removing boder from search box*/
border: none;
/*defining background image as a search symbol*/
background-image: url(http://placehold.it/100);
background-repeat: no-repeat;
/*background-size*/
-webkit-background-size: 25px 26px;
-moz-background-size: 25px 26px;
-o-background-size: 25px 26px;
background-size: 25px 26px;
/*positioning background image*/
background-position: 8px 14px;
/*changing background color form white*/
background-color: #7accc8;
outline: 0;
}
/*now using placeholder property to change color of placholder text and making it consitent accross the browser by use of prefix*/
input[type="search"]::-webkit-input-placeholder {
color: #b1e0de;
}
input[type="search"]:-moz-placeholder {
/* Firefox 18- */
color: #b1e0de;
}
input[type="search"]::-moz-placeholder {
/* Firefox 19+ */
color: #b1e0de;
}
input[type="search"]:-ms-input-placeholder {
/* interner explorer*/
color: #b1e0de;
}
<div class="maindiv">
<form id="myform" name="myform" method="post" action="schitems.php">
<input type="search" id="itemcd" name="itemcd" class="inputfields" placeholder="Type an Ingredient..." />
</form>
</div>
Hope this helps! :)
I got this range input in my Ionic Mobile App:
<input class="clear-all" type="range" name="strange" on-release="updateContent()" ng-model="rangeDefault" min="1" max="{{rangesCount}}" value="1" step="1" ng-disabled="isDisabled()">
With this CSS applied to it:
.custom-range input[type='range']::-webkit-slider-thumb {
width: 20%;
/*display: none;*/
height: 1.6vh;
background: rgb(255,255,255);
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 1);
margin-top: -3px;
border-radius: 5px;
}
Depending on an option I want to hide the thumb but keeping the track. If I comment out display: none; it works. I get range input without the thumb. But I want to do it dynamically based on user interaction.
I really don't know how to interact with input on CSS. I'm using angularJS and javascript but no JQuery (I'll keep it away from my project as long as I can) so I'm looking for a pure js solution.
I read this, this and this among others solution. I'm able to hide the input but not the track or thumb separately.
So I assume .custom-range will be on a parent element right? If so the code could look like this:
<div class='custom-range'>
<input class="clear-all" type="range" name="strange" on-release="updateContent()" ng-model="rangeDefault" min="1" max="{{rangesCount}}" value="1" step="1" ng-disabled="isDisabled()">
</div>
You could use ng-class to add a class to div.custom-range dynamically:
<div class='custom-range' ng-class="{'disabled-range':isDisabled()}">
....
</div>
and add a bit of css:
.custom-range.disabled-range input[type='range']::-webkit-slider-thumb {
display: none;
}
Haven't tested this .. but I hope it's clear enough.
I have a check box which is placed inside the label control. I need to change the label background color on focus a checkbox.
Yes
I have seen source code for Textbox as follows:
input:focus + label {background-color: red;}
I have tried above code with checkbox but for checkbox not working.
input[type="checkbox"]:focus + label {background-color: red;}
Please help me on this
Fiddle Demo
Since the input is a child of the label there is no CSS selector that can affect / select it.
Using Jquery, however, it is a simple matter.
$(document).ready(function () {
$('input').focus(function () {
$(this).parents('label').addClass('focused');
});
$('input').blur(function () {
$(this).parents('label').removeClass('focused');
});
});
label {
float:left;
}
.focused {
outline:none;
box-shadow: 0 0 1px 2px rgba(0, 240, 255, 0.4);
background-color : rgba(0, 240, 255, 0.4);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="chkYesIsSubPropofferedSale">Check
<input id="chkYesIsSubPropofferedSale" type="checkbox" />
</label>
Note: My JQ skills are minor so I'm sure this can be improved.
Building on the answer given by Paulie_D and the fiddle provided by Alexander - I've come up with the following fiddle
It uses the jQuery hover event to attach and remove a class from a label that's the parent of a checkbox - hopefully this will be of some use to you. The jQuery in question is as below:
$('.checkBoxClass').hover(
function()
{
$(this).parent('label').addClass('focused');
},
function()
{
$(this).parent('label').removeClass('focused');
}
);
Where focused has been previously defined with the background-color required. You don't need to use a class however, you could just set the colour separately:
$(this).parent('label').css('background-color', 'red');
Without JavaScript you can't do that unless both elements have the same parent in DOM tree.
element1 + element2 is "successor" selector - it applies rules to every element2s that are placed immediately after element1. But with CSS you can visually place one element in another without it being it's parent. POC:
label {
float:left;
margin-right: -22px;
padding-right: 22px;
}
input:focus + label {background-color: red;}
input[type="checkbox"]:focus + label {
outline:none;
box-shadow: 0 0 1px 2px rgba(0, 240, 255, 0.4);
background-color : rgba(0, 240, 255, 0.4);
}
<div class="row">
<input id="contact_form_mail" name="contact_form_mail" type="email" placeholder="Your e-mail address...">
<label><input id="chkYesIsSubPropofferedSale" type="checkbox"></label>
<br>
<input id="chkYesIsSubPropofferedSale" type="checkbox">
<label>Check</label>
</div>
I'm trying to enable hover (adding '.add_link_twitter_hover' class) when the checkbox is not selected & disable it (removing the '.add_link_twitter_hover' class) once the checkbox is selected the same way Pinterest does it for Twitter/Facebook checkboxes when a user adds a pin:
I tried this, but it doesn't disable hover (doesn't remove '.add_link_twitter_hover' class) once mouse pointer is away:
var hoverTwitter = "add_link_twitter_hover";
$(postTwitter + " input").click(function(e) {
$(this).parent().removeClass(hoverTwitter);
$(this).parent().toggleClass(activePostTwitter);
});
$("label.add_link_twitter").hover(function(e) {
if($("input.publish_to_twitter").is(":checked")) {
$(this).removeClass(hoverTwitter);
return;
}
$(this).addClass(hoverTwitter);
});
Any idea how to enable hover when the checkbox is not selected & disable it once the checkbox is selected? Thanks in advance!
Here's the jQuery:
var postTwitter = ".add_link_twitter";
var activePostTwitter = "active";
$(postTwitter + " input").click(function(e) {
$(this).parent().toggleClass(activePostTwitter);
});
Here's the html:
<label class="add_link_twitter">
<input type="checkbox" name="publish_to_twitter" class="publish_to_twitter"><span>Share on Twitter</span>
</label>
Here's the css:
.add_link_twitter{
position:absolute;
left:15px;
bottom:16px;
color: #a19486;
border: 2px solid transparent;
border-color: #F0EDE8;
border-radius: 4px;
font-size: 13px;
font-weight: bold;
cursor: pointer;
padding: 7px;
padding-top: 5px;
padding-bottom: 5px;
}
.active {
border-color: #468BD0;
color: #468BD0;
background-color: whiteSmoke;
}
.add_link_twitter_hover
{
color: #A19486;
border: 2px solid transparent;
border-color: #C2B1A2;
border-radius: 4px;
background-color: white;
padding: 7px;
padding-top: 5px;
padding-bottom: 5px;
}
Try this:
$("label.add_link_twitter").hover(function(e) {
if(!$("input.publish_to_twitter").is(":checked"))
$(this).addClass(hoverTwitter);
}, function() {
$(this).removeClass(hoverTwitter);
});
The usual way to use the .hover() method is to supply two functions: the first is called when the mouse moves over the element in question, and the second is called when the mouse moves out.
So what I've done above is in the first function (mouseenter) I've added your class if the checkbox is not checked. In the second function (mouseleave) I just remove the class.
This can be done without any javascript at all. if you expect to always have the class "publish_to_twitter", just separate the two states with pseudoclasses:
.publish_to_twitter:hover{
width:50px;
}
input.publish_to_twitter:checked{
width:500px;
}
I added the input element in the selector to ensure that the checked style took precedence. Just make sure that for every style you set with :hover, you have an equivalent style in :checked.