Hiding a checkbox and creating a custom button - html

I am trying to hide checkbox, but still allow it to check when a div / button is pressed.
My code for the custom buttons are
<div class="checkbox flex item center-text bg-theme"
style="border: 1px solid #e3e3e3;border-radius: 12px;">
<i class="twf twf-round-pushpin"></i>
<label for="nearest" class ="color-theme right-5">Nearest to me </label>
<input type="checkbox" id="nearest" class = "filtering" value="nearest" >
I've tried adding visibility:none and display:none; but this just doesn't work, when i click the buttons, nothing happens.

You might try to add opacity:0; in the css.
If you do not want the box to be directly checkable, use pointer-events:none in addition to that

Add display:inline-block on the first div so it will take only the minimum place and won't leave a big blank.
Then for the checkbox, using display:none works fine, I've added an onclick callback to log the state of the checkbox on each click on the label.
Try this sample:
<div class="checkbox flex item center-text bg-theme" style="border: 1px solid #e3e3e3;border-radius: 12px; display:inline-block;">
<i class="twf twf-round-pushpin"></i>
<label for="nearest" class ="color-theme right-5">Nearest to me </label>
<input type="checkbox" id="nearest" class = "filtering" value="nearest" style="display: none;" onclick="console.log(this.checked)">
</div>

Related

Not able to see entire text when embeded clear button in inputbox

In Angular, I have added clear button inside input box but after adding it I am not able to see entire text in input box as it is being overlapped. Please find detailed information below.
HTML Code
<ng-template pTemplate="input">
<input pInputText type="text" class="col-input-grid-100" >
<span class="mar-left">
<button (click)="clearmail1(ri)" style="border:none; outline: none; position: relative; width:0;background-color: #fff;">
<i class="pi pi-times"></i>
</button>
</span>
</ng-template>
CSS content
.col-input-grid-100{
width: 135%;
margin-left: -10px;
}
.mar-left{
margin-left:-29px;
}
Current Output: Text in input box is test3#test.com.
As you can see in above image "com" is not visible clearly. I tried multiple ways but things didnt work. Kindly help me to resolve this issue.
Note:
1. I want to show cross button inside input box only
2. I am not using bootstrap library.
I tried with below code and it worked for me.
<span class="p-input-icon-right">
<i class="pi pi-times" (click)="clearmail1(ri)" style="margin-right: -16px;"></i>
<input id="email1" class="col-input-grid-100" type="text" pInputText >
</span>
Output

Exclude materialize css for some specific checkbox

I want to exclude materialize css for some items in my view. Eg: i dont want to display materialize styles to check box under table. It causes problems with my internal jquery library. Please check attached image. I gave below html content in my table > td. I want to display this as browser default checkbox.
In my application i am using http://materializecss.com
<div class="checkbox">
<input type="checkbox" class="filled-in dt-checkboxes">
<label></label>
</div>
To remove the Materialize styles from the checkboxes, you first need to understand how the Materialize checkboxes are created:
The "real" checkbox is removed with opacity: 0; and some positioning
A "fake" checkbox is created with the help of the pseudo elements ::before and ::after on the <span> element
So all you need to do is hide the pseudo elements and make the real checkbox visible again. I created a class .reset-checkbox to demonstrate the effect:
[type="checkbox"].reset-checkbox,
[type="checkbox"].reset-checkbox:checked,
[type="checkbox"].reset-checkbox:not(checked) {
opacity: 1;
position: relative;
}
[type="checkbox"].reset-checkbox+span::before,
[type="checkbox"].reset-checkbox+span::after,
[type="checkbox"].reset-checkbox:checked+span::before,
[type="checkbox"].reset-checkbox:checked+span::after {
display: none;
}
[type="checkbox"].reset-checkbox+span:not(.lever) {
padding-left: 10px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />
<form action="#">
<div>
<label>
<input type="checkbox" class="filled-in" />
<span>Test with Materialize</span>
</label>
</div>
<div>
<label>
<input type="checkbox" class="filled-in reset-checkbox" />
<span>Test with removed styles</span>
</label>
</div>
</form>
Pay attention to a higher specificity of the selectors here, to make sure that the Materialize styles are overwritten.

Change text on radio button click

I have five thumbnail images in a row, below each image is a title and below the whole row is about 100 words of description text. What I intend to do is setup thumbnails to act as radio buttons to change the block of description text below the row to something relevant to that image.
So far I have setup the thumbnails with:
<div id="thumbcontainer" style="left: 60px;">
<img class="thumb"src="image1.jpg" >Title1
</div>
<div id="thumbcontainer" style="left: 160px;">
<img class="thumb"src="image2.jpg" >Title2
</div>
etc.
<p class=”descrcontainer”>Description text of 100 words</p>
I am working through information in previous questions about how to use images as radio buttons but I cannot find any information about how to change the a block of text when a radio button is clicked. Can someone help me?
Errors
#ids must be unique, there's 2 id="thumbcontainer"
Each class=”descrcontainer”is a syntax error. A smart quote ” does not work in code, use double straight quote "
Solution
Add <input id='rad*' class='rad' name='rad' type='radio' style='display:none'> in front of each <p>
Add display:none to each <p>
Make the <div class="thumbcontainer"> into <label for='chx*'>
Add The CSS etc.
Use label:focus in CSS and add tabindex='1' to each <label> to highlight buttons.
Explaination
A <label> with for attribute with a value of an #id of a form control (e.g. <input type='radio'>) are linked. If you click a <label for='rad0'>, <input id='rad0' type='radio'> is clicked as well--like a remote button.
All <input type='radio'> that share the same name attribute will toggle in sync with each other. The behavior is basically only one radio can be checked.
A radio in the checked state can influence the styles of sibling elements that are after it and elements that are its descendants. In this demo:
.rad:checked + .descrcontainer {display:block;}
Any element with the class of .rad that is checked will make the next element with the class of .descrcontainer appear.
Demo
.descrcontainer {
display: none
}
.rad:checked+.descrcontainer {
display: block;
}
label:focus {
outline: 5px ridge cyan;
box-shadow: 2px 4px 6px 8px rgba(0, 128, 200, 0.4);
}
<label for='rad0' class="thumbcontainer" style="display:inline-block;" tabindex='1'>
<img class="thumb"src="https://static-s.aa-cdn.net/img/ios/1112633650/92503d478bfa0e96f28a3fefe2edf5f1?v=1" width='128'><div style='text-align:center'>Dinosaurs</div>
</label>
<label for='rad1' class="thumbcontainer" style="display:inline-block;" tabindex='1'>
<img class="thumb"src="https://cdn-img.fimfiction.net/user/pcrx-1431833332-196431-256" width='128'><div style='text-align:center'>Demons</div>
</label>
<input id='rad0' type='radio' class='rad' name='rad' style='display:none'>
<p class="descrcontainer">Angulomastacator blikanasaurus colepiocephale didanodon leshansaurus niobrarasaurus nuoersaurus ovoraptor owenodon parksosaurus plateosauravus silvisaurus titanosaurus xenotarsosaurus yaleosaurus yamaceratops yunxiansaurus. Campylodon clepsysaurus elrhazosaurus
giraffatitan heterosaurus iguanodon magnirostris piatnitzkysaurus shanag shidaisaurus tochisaurus veterupristisaurus yimenosaurus. Airakoraptor astrodon balochisaurus brontosaurus ceratonykus elaphrosaurus fabrosaurus hadrosauravus hallopus indosuchus
khateranisaurus moshisaurus nanotyrannosaurus neovenator peltosaurus puertasaurus rebbachisaurus suchosaurus tianyuraptor umarsaurus unquillosaurus wannanosaurus xixiposaurus.</p>
<input id='rad1' type='radio' class='rad' name='rad' style='display:none'>
<p class="descrcontainer">Adramelech andromalius azazel bali raj behemoth bhuta corson dagon eurynomos foras forneus gaki malthus mastema mephistopheles moloch ninurta onoskelis oray ose samael surgat tannin ziminiar. Agares aka manah azazel barbas davy jones drekavac eligos malthus
incubus kokb'ael labal mammon marchosias naberius paimon surgat vapula. Ahriman alal azaz'el baal bael boruta cimeies crocell eblis familiars forcas jikininki labasu morax ad-dajjal medusa naberus serguthy shax shedim. Haborym alastor allocer allu ammut
andhaka asag asb'el azaz'el azi dahaka bael balam davy jones gamigin imp ipos ipes jikininki kabhanda medusa naphula orcus paimonia serguthy vephar vine.</p>

How to automatically select radio button by clicking the padding around it?

I read from this question: Can the label tags for attribute be associated with a normal div? that is not possible to give a div the attribute for to be associated to the id in the input.
Normally if I give a for to label and id to input the radio button is automatically selected whenever the user clicks the text in the label.
Let's say I create a form with many radio buttons and each one of them are in a span or a div so I can dive a border that wraps both label and radio button, let's also say I give a 20px padding all directions, how can I make clickable the all area within the border so it autotomatically selects the radio button associated to the div?
I wrote this below but just found out div doesn't recognize for attribute:
HTML
<div class="radio-btn" for="rdBanana"><input type="radio" name="fruit" value="banana" id="rdBanana"><label>Banana</label></div>
<div class="radio-btn" for="rdOrange"><input type="radio" name="fruit" value="orange" id="rdOrange"><label>Orange</label></div>
<div class="radio-btn" for="rdKiwi"><input type="radio" name="fruit" value="kiwi" id="rdKiwi"><label>Kiwi</label></div>
CSS
.radio-btn {
display: inline-block;
border: 1px solid black;
padding: 20px;
}
How can i make all the padding clickable to automatically select radio button?
Place the button inside the <label>.
Instead of <input type="radio"><label>Banana</label>, use <label><input type="radio">Banana</label>.
Everything inside <label> will become clickable and toggle the button.

How do I change the color of a checkbox without changing it for the whole class?

I need to change the style of a checkbox label.
this is my html:
<div class="ui-checkbox">
<input id="keepMeInformed" type="checkbox" data-theme="d" onchange="fixCheckboxesValues();" checked="checked" value="1" name="optedIn">
<label class="optional ui-btn ui-btn-icon-left ui-btn-corner-all ui-btn-up-d ui-checkbox-off" for="keepMeInformed" data-theme="d">
<span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text">Label text</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-off"></span>
</span>
</label>
</div>
I need the text to be red but if I change the .ui-btn-text class style all the buttons of the page will get the red text style.
.ui-btn-text{
color:red;
}
Is there a way to change only the color of the label in the checkbox?
Edit:
thanks guys I solved the problem adding a div that wrapped the CheckBox and wrote jQuery:
function changeCheckBoxStyle() {
$('#checkBoxWrapper').find('[class=ui-btn-text]').css('color','red');
}
but I think that scott's solution works ok too :) thanks
Assuming you are using ID's correctly (unique to a page) then this should work:
#keepMeInformed + label .ui-btn-text {
color: red;
}
It looks for the unique input element keepMeInformed and then finds the sibling label element next to it and applies the style to that label's .ui-btn-text class element only.