I have this HTML code :
<div class="field">
<input type="hidden" value="" name="a" id="a"> <input type="hidden" value="xxxx" name="b" id="b">
<input type="file" value="" name="file1"> <input type="file" value="" name="file2">
<input type="file" value="" name="file3"> <input type="file" value="" name="file4">
<input type="file" value="" name="file5"> <input type="file" value="" name="file6">
<input type="file" value="" name="file7"> <input type="file" value="" name="file8"> </div>
In this HTML, i want hide all input type="file" inside div class="field"except the first one.
I cannot change the HTML (adding classes).
I tried to apply a pseudoclasses and structurate selector toghether, to accomplish the task :
.field input[type='file']{
display:none;
}
.field input[type='file']::first-child{
display:block;
}
But it seems doesn't work.
Anyone could suggest me the right syntax for using pseudo classes and selector togheter in css, to solve this problem?
Pseudo-classes use only one colon, so it's :first-child, not ::first-child.
But your first input[type='file'] is not the first child, so you can't use :first-child with it anyway.
You have to switch the rules around and use a sibling selector instead to hide the subsequent file upload inputs:
.field input[type='file'] {
display:block;
}
.field input[type='file'] ~ input[type='file'] {
display:none;
}
This technique is further described here, and can be used for most other simple selectors, not just classes and attributes.
You can use this code for all values and you will hide all input type="file" inside div class="field"except the first one. try this code.
<html>
<head>
<style>
.field input[type='file']
{visibility:hidden;}
</style>
</head>
<body>
</body>
</html>
Related
When applying checked="checked" to a radio input the corresponding CSS does not seem to work (:checked)
What am I missing?
....
Try using checked only without the colon in front of it.
Kendo controls can sometimes be a bit difficult when trying to override their provided styles. If I correctly understood your question and example, it seems you are trying to change the background and border properties of the entire radio button control?
In the case of your given example, you'll need to target the label for the control, not the control itself. To do this, you can use the Adjacent Sibling Selector to select the label for the control since in your example it is positioned immediately after the control you are targeting. This looks like: .k-radio:not(:checked) + label.k-radio-label in the example I provided below.
input[type=radio],
input[type=checkbox],
input.k-checkbox,
input.k-radio {
width: 16px;
height: 16px;
}
input[type=checkbox]:not(:checked),
input[type=radio]:not(:checked),
.k-checkbox:not(:checked),
.k-radio:not(:checked)+label.k-radio-label {
background-color: #EBF1FD;
border-color: #B8D8F7;
border-width: 1.5px;
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.913/styles/kendo.mobile.all.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.913/js/kendo.all.min.js"></script>
<label>Kundentyp</label>
<div class="input">
<input type="radio" name="kndtyp" id="kndtyp0" class="k-radio ng-pristine ng-untouched ng-empty ng-invalid -ng-invalid-required" ng-disabled="info.contact.usr" ng-value="'0'" ng-model="info.contact.kndtyp" required="required" checked="checked" value="0">
<label class="k-radio-label" for="kndtyp0">naturlich</label>
<input type="radio" name="kndtyp" id="kndtyp1" class="k-radio ng-pristine ng-untouched ng-valid ng-empty" ng-disabled="info.contact.usr" ng-value="'1'" ng-model="info.contact.kndtyp" required="required" checked="checked" value="1">
<label class="k-radio-label" for="kndtyp1">juristisch</label>
</div>
I have a form there are 4 options (they may be checkbox or radio).
I want to select multiple options but one is compulsory.
I know it is possible in JS/jQuery but I want a HTML/CSS based solution.
To be able to check multiple inputs, they must be checkboxes. (They could be radio buttons with different names, but you wouldn't be able to uncheck them once checked.)
So use checkboxes, and show the Submit button only if any are checked, using the general sibling selector (~):
input[type="Submit"] {
display: none;
}
input:checked ~ input[type="Submit"] {
display: inline;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit">
If you want the appearance of a disabled submit button, add a second button that is disabled.
When no input is clicked, show the disabled submit button only. When one or more inputs are clicked, show the enabled submit button only:
input[type="Submit"]:not([disabled]) {
display: none;
}
input:checked ~ input[type="Submit"]:not([disabled]) {
display: inline;
}
input:checked ~ input[disabled] {
display: none;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<input type="Submit" disabled>
<input type="Submit">
Further to the answer of #Rick Hitchcock, I think that you will want to show to the user the button submit but it will disabled until one of the checkboxes will be checked.
If so, you can use pointer-events (in all modern browsers: http://caniuse.com/#feat=pointer-events) like this:
input[type="Submit"] {
opacity:0.5;
pointer-events:none;
/* animation added for fancy ;) */
transition:all .2s ease;
}
input:checked ~ .button-wrapper input[type="Submit"] {
opacity:1;
pointer-events:all;
}
.button-wrapper {
position:relative;
display:inline-block;
}
.button-wrapper:before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1;
}
input:checked ~ .button-wrapper:before {
display:none;
}
<input id="c1" type="checkbox"><label for="c1">First</label><br>
<input id="c2" type="checkbox"><label for="c2">Second</label><br>
<input id="c3" type="checkbox"><label for="c3">Third</label><br>
<input id="c4" type="checkbox"><label for="c4">Fourth</label><br>
<div class="button-wrapper">
<input type="Submit" tabindex="-1">
</div>
Edit I was added a "mask" in .button-wrapper:before so it will work in the old browsers.
You can do this in html5 using the required attribute
Like
<input type="checkbox" required name="your_checkbox_name">
This tells the browser that the form should not be to submitted without the checkbox being checked.Although i recommend java-script since not all browsers will be able to recognize this.
Or
If you want to detect if at least one check box is selected as suggested by #RickHitchcock in the comments,You could use
span {
display: inline;
color: red;
}
input[type="Submit"],
input:checked ~ span {
display: none;
}
input:checked ~ input[type="Submit"] {
display: inline;
}
<form action="#" method="post">
<input type="checkbox" />Checkbox 1
<br />
<input type="checkbox" />Checkbox 1
<br />
<input type="checkbox" />Checkbox 1
<br />
<input type="submit" value="Submit" /><span>! Please check at least one checkbox</span>
</form>
You can use the following for which one is compulsory.
<input type="radio" name="name" required>
Which one without required will not be tested if it is ticked or not.
Try This:
<input id="c3" type="checkbox" required><label for="c3">Third</label><br>
<input id="c4" type="checkbox" required><label for="c4">Fourth</label><br>
Or you can try this using jquery to validate a html checkbox:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Makes "field" always required. Nothing and blanks are invalid. </title>
<link rel="stylesheet" href="http://jqueryvalidation.org/files/demo/site-demos.css">
</head>
<body>
<form id="myform">
<label for="field">Required: </label>
<input type="text" class="left" id="field" name="field">
<br/>
<input type="submit" value="Validate!">
</form>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://jqueryvalidation.org/files/dist/jquery.validate.min.js"> </script>
<script src="http://jqueryvalidation.org/files/dist/additional- methods.min.js"></script>
<script>
// just for the demos, avoids form submit
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});
$( "#myform" ).validate({
rules: {
field: {
required: true
}
}
});
</script>
</body>
</html>
required is the way html validates things
I have a checkbox input control and I have a CSS file which includes the following declaration:
input[type="checkbox"] {
display:none;
}
I want this CSS to be be applied to any checkbox input element except one. How can I ignore this CSS rule(display:none;) on one of my controls?
All you need to do is target that specific checkbox and give it a display of initial.
You haven't provided any HTML so I'm going to have to make up a generic example:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"].bar {
display: initial;
}
<input type="checkbox" class="foo" />
<input type="checkbox" class="bar" />
<input type="checkbox" class="baz" />
You can simply do something like:
input[type="checkbox"]:not(.this_one) {
display: none;
}
Note: Replace this_one with the ID or class of the one you want to exempt(leave out)
See working example here
As you can see by the other solutions, there are many ways to accomplish what you want. Another way is to use the "cascading" aspect of cascading style sheets by overriding the style within the element:
input[type="checkbox"] {
display: none;
}
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" style="display:initial" />
Just use a class to add this css property (and possibly others) and omit the class for the needed element
input[type="checkbox"].yourClass
{
display:none;
}
<input type="checkbox" name="vehicle" value="Bike" class = "yourClass"> I have a bike
<input type="checkbox" name="vehicle" value="Bike" class = "yourClass"> I have a bike
<input type="checkbox" name="vehicle" value="Bike"> The one without the class
I have a form field box with class CCPPDisplayTD.
I'm trying to make it's length longer with CSS styling.
How do I use CSS to accomplish this?
<form>
<input type="text" /><br />
<input type="text" class="CCPPDisplayTD" />
</form>
.CCPPDisplayTD{
width: 200px;
}
See here: http://jsfiddle.net/GT8jD/
In your stylehseet you need the following:
.CCPPDisplayTD{
width: 250px; // whatever size you need.
}
Your HTML needs to resemble something similar to:
<form>
<label> /* Label elements are required for better accessibility */
<input type="text" class="CCPPDisplayTD" />
</label>
</form>
Or the following:
<form>
<label for="input-name"> /* Label elements are required for better accessibility */
<input type="text" class="CCPPDisplayTD" id="input-name" name="input-name" />
</label>
</form>
I was wondering if it is possible to specify elements in CSS where an attribute is equal to one of two values, something like this:
input[type=text][type=password]
However this selector does not seem to work (I assume because specifying the same attribute twice is not valid), does anyone know how to do this?
You may simply list them as individual selectors:
input[type="username"],
input[type="password"] {
color: blue;
}
<form>
Username: <input type="username" name="Username" value="Username" />
Password: <input type="password" name="Password" value="Password" />
<input type="submit" value="Submit" />
</form>
One option nowadays is :is, a little cleaner and saves characters as the list of selectors increases:
<style>
input:is([type=text], [type=password]) { background-color: red }
</style>
<input type="text"> red
<input type="password"> red
<input type="email"> white
MDN has some useful examples that show where a major reduction in the number of selectors can be had using :is https://developer.mozilla.org/en-US/docs/Web/CSS/:is