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.
Related
I was creating a search function on my webpage, where when the button (label) is clicked then the search bar will be appeared. However, it is not working with checkbox. I have another checkbox on the same page which is working and I make sure the for attribute in label is pointing correctly.
I have the following code in my html:
<input type="checkbox" id="search-switch" />
<div>
<label for="search-switch">
<button type="button"><svg><!-- a svg pic here --></svg></button>
</label>
<!-- some other elements -->
</div>
<div class="search-placeholder">
<!-- a search bar -->
</div>
and the this in css:
#search-switch {
display: none;
}
.search-placeholder {
display: none;
}
#search-switch:checked ~ .search-placeholder {
display: block;
}
I also tried to put the <input> after the div that contains the label but still not working.
<div>
<label for="search-switch">
<button type="button"><svg><!-- a svg pic here --></svg></button>
</label>
<!-- some other elements -->
</div>
<input type="checkbox" id="search-switch" />
<div class="search-placeholder">
<!-- a search bar -->
</div>
I'm building a no-js page in case people has javascript disabled in their browser settings, so I want a script-free solution. I know it can be easily done with js, and I don't even need to use checkbox method. Because of the layout I can't move either the place of <label> or the place of the search bar.
So I deselect the display: none; of my input checkbox and I actually solve the problem myself. It appears that with the button inside, the checkbox isn't checked. I now only need to add pointer-events: none; to my css of the corresponding button and it works now.
Here I come another question, which I think it might be self-explanatory: How would my button work again when js isn't disabled? Should I point it to checkbox instead?
I have a containing div that has three divs inside. I want to style only the two divs that contain the radio input. Without using class names, is it possible to select those two divs?
If not, how do I select just the radio inputs and style those? Here's my attempt, with non-working CSS:
.container > div > input[type="radio"] {
border:1px solid green;
}
<div class="container">
<div>
<input type="radio" id="22" name="SetFour">
<label for="22"><span>Selection One</span></label>
</div>
<div>Some Random Div</div>
<div>
<input type="radio" id="23" name="SetFour">
<label for="23"><span>Selection Two</span></label>
</div>
</div>
CodePen for reference
You can use nth-of-type. But do this only if you have no alternatives and are sure that this block will not change in the future.
.container > div:nth-of-type(1),
.container > div:nth-of-type(3) {
border:1px solid green;
}
The selector selects the radio buttons, but the radio inputs don’t support the border property.
In case you want to select the divs, not the inputs, use classes; although there is a :has() pseudo‐class in the specifications, no major browser currently supports it.
https://caniuse.com/css-has
https://www.w3.org/TR/selectors-4/#relational
you have to set them a class.
write the similar class and styling.
or their id.
((I'm a beginner so this probably has a simple solution, but I've searched with all the keywords I can think of and can't find what I'm looking for. I appreciate any help — clearly I am in over my head.))
I'm trying to give the first radio button within a paragraph a different margin than the rest of the radio buttons. This is what I have:
p.question:first-child input[type=radio] {
margin: 5px;
}
<p class="question">
<input type="radio" name="sample1" /> Yes
<input type="radio" name="sample1" /> No
<input type="radio" name="sample1" /> Maybe-So
</p>
Shouldn't this target the first radio button within a paragraph? Please be gentle.
You're putting the first-child on the <p>, not the radio button.
Try this.
p.question input[type=radio]:first-child {
margin: 5px;
}
Here's a jsfiddle.
I have created a "CSS-only" Website that uses only CSS/HTML/PHP, with a CSS Menu, dynamic loading content (images) and a CSS Magnifier. I don´t want to use Javascript/jQuery or Cookies and the Website works perfectly so far. The layout was really hard to adjust to fit correctly to all browsers but finally I got the Apple-InternetExplorer (Safari) working too.
For the menu I used the "Checkbox Hack". But instead of checkboxes I´m using radio-buttons to display only one content-page. That looks like this:
<!--
We need these input-fields to trigger display:block on another element
The radio-buttons must use the same "name" to jump between different content-pages.
(only 1 Radio-Button can be active)
-->
<input type="radio" id="radioactive-1" name="radioactive">
<input type="radio" id="radioactive-2" name="radioactive">
<!-- This simple menu triggers the radio-button with the id (for=id) -->
<label for="radioactive-1">Menu-Entry 1</label>
<label for="radioactive-2">Menu-Entry 2</label>
<!-- Heres the content to display, but it is set to display: none;
so the content only gets displayed if the correct radio-button is active -->
<div id='content-wrapper'>
<div id='not-radioactive-1' style='display:none;'></div>
<div id='not-radioactive-2' style='display:none;'></div>
</div>
That markup was shortened, but I think its clear enough. Now we need the CSS which is important to get this to work:
input[id="radioactive-1"]:checked ~ #content-wrapper #not-radioactive-1 {
display:block!important;
}
input[id="radioactive-2"]:checked ~ #content-wrapper #not-radioactive-2 {
display:block!important;
}
You can see that these CSS-Declarations can get very long and I´m triggering multiple styles to different elements with one click. The code for the menu is ~20 KB and thats massive.(50% the size of my CSS-File)
Now my question: Is there any way to get the number of the class for the input field to use it for the content class?
Example:
input[id="radioactive-$value"]:checked ~ #not-radioactive-$value
I know one way to ignore the number and use all id´s including a defined string.
Example:
input[id^="radioactive-"]:checked
I also know that I can use PHP and just do a loop but in the end the CSS have the same size, because the whole code gets echoed. I´m searching for a CSS-only solution if this is possible. I only want to shorten my code and speed up page-loading.
You can do that without relying on those numbers by inserting the radio buttons directly before each section:
HTML:
<div id="content-wrapper">
<input type="radio" id="radioactive-1" name="radioactive">
<div class="content"></div>
<input type="radio" id="radioactive-2" name="radioactive">
<div class="content"></div>
</div>
CSS:
.content {
display: none;
}
input[name="radioactive"]:checked + .content {
display: block;
}
It doesn't matter where the labels are, as long as the for attributes matches to some input.
One solution is that you can use the PHP loop in the HTML file and using the loop, print following piece of code,
<div id='content-wrapper'>
<input type="radio" id="radioactive-1" name="radioactive">
<label for="radioactive-1">Menu-Entry 1</label>
<div id='not-radioactive-1' style='display:none;'></div>
<input type="radio" id="radioactive-2" name="radioactive">
<label for="radioactive-2">Menu-Entry 2</label>
<div id='not-radioactive-2' style='display:none;'></div>
</div>
And the CSS file would have the following,
input[type="radio"]:checked ~ div {
display:block!important;
}
I am trying to display a number of inputs and their corresponding labels. They are both inline elements, and I have a working solution with adding a br tag at the end like so
<label for="hello"></label>
<input id="hello" type="text" />
<br>
<label for="stackoverflow"></label>
<input id="stackoverflow" />
Id like to solve this without extraneous HTML markup, i.e with CSS. What is the easiest way to do this?
I have viewed other questions similar to this, but aligning by row instead of by column.
You can wrap the labels around your inputs and display them as blocks:
<style>
label { display: block; }
</style>
<label>
Hello: <input name="hello">
</label>
<label>
StackOverflow: <input name="stackoverflow">
</label>
Note that when you do this you don't need to use the for="name" attribute.
The other way (if you don't want the labels wrapped around your inputs) is to float the labels to the left:
<style>
label { float: left; clear: left; }
</style>
However, I generally prefer a little more markup, something that connects the label and the input into one logical element, called a field:
<div class="field">
<label for="hello">Hello</label>
<input name="hello">
</div>
<div class="field">
<label for="stackoverflow">Stackoverflow</label>
<input name="stackoverflow">
</div>
Because each field is a div, it will display as a block automatically, but you can control it for individual fields as well.
Try to set display:inline-block for your input and label elements. So you can add all block element specific css like witdh or margin-bottom.
You can also set your input and label to display:block and add margin-bottom only to the the input. Or you can reverse it and add a margin-top to your labels ;)
If you want to remove the margin on the last element you can use input:last-child {margin-bottom:0;}
input, label {display:block;}
input {margin-bottom:18px;}
input:last-child {margin-bottom:0;}
/* Or to be specific you can use the attribut-selector
which only works on inputs with type="text"
*/
input[type="text"]:last-child {margin-bottom:0;}