How can I select in CSS, one input from more inputs with same type?
<input type="submit" value="send">
<input type="submit" value="reset">
I want to edit only input with value reset
input[value="reset"] {
background-color: red;
border:none;
color:white;
}
<input type="submit" value="send">
<input type="submit" value="reset">
You can use input[type="submit"]:last-of-type
If you are using same style in many element you can create .css file and add there.Or else you can do like this:
<input type="submit" value="reset" style='background-color:green;'>
Related
I’m kinda of stuck.
I’m using html5 required for a very simple validation, and I have a checkbox that only shows up if you meet some conditions. You then have to agree with terms and check the checkbox.
The problem is when you don’t hit conditions and checkbox reminds hidden then its not posible to submit. It should only be required if you see it.
.terms{
display: none;
}
<form>
<p><input class="terms" type="checkbox" id="checkId" required>Terms & Conditions</p>
<input type="submit" name="submit" value="Submit" id="submit" />
</form>
This will work
<form>
<p><input class="terms" type="checkbox" id="checkId" name="checkId" checked style="visibility: hidden;">Terms & Conditions</p>
<input type="submit" name="submit" value="Submit" id="submit" />
</form>
I have a form with a button inside it which I need to hide.
<form method="get">
<input type="hidden" name="id" value="7245">
<input type="hidden" name="action" value="removesubmissionconfirm">
<button type="submit" class="btn btn-secondary" title="">Remove submission</button>
</form>
There are multiple forms with the exact same values as the above, the only difference being the value="removesubmissionconfirm". Is it possible to hide the button based on that value using only css?
I've tried a lot of things and nothing seems to work.
TIA.
You can do it using the attribute selector and the + selector :
input[value="removesubmissionconfirm"] + button {
display: none;
}
<form method="get">
<input type="hidden" name="id" value="7245">
<input type="hidden" name="action" value="removesubmissionconfirm">
<button type="submit" class="btn btn-secondary" title="">Remove submission</button>
</form>
Generally no, but it may be in this specific example, considering the fact that the button comes directly after the hidden action field. Try this:
input[value="removesubmissionconfirm"] + button {
display: none;
}
input[value="removesubmissionconfirm"] + button {
display: none;
}
<form method="get">
<input type="hidden" name="id" value="7245">
<input type="hidden" name="action" value="removesubmissionconfirm">
<button type="submit" class="btn btn-secondary" title="">Remove submission</button>
</form>
I want to avoid line break between the buttons login and Register,So that the two buttons come in the same line
<h1>Are You ready to take the quiz</h1>
<form action="link1">
<input type="submit" value="Login" />
</form>
<form action="link2">
<input type="submit" value="Register" />
</form>
You can use css for that.
form {
display: inline-block;
}
In order to prevent every form element you're using to get inlined, I'd attatch a class to those which you want to inline.
<form class="inline" action="link1">
<input type="submit" value="Login" />
</form>
<form class="inline" action="link2">
<input type="submit" value="Register" />
</form>
form.inline {
display: inline-block;
}
Demo
Here a solution, I used a container : sameLine so evrithing is in that div will be on the same line
.sameLine{white-space: nowrap;}
.sameLine * {
display: inline;
}
<h1>Are You ready to take the quiz</h1>
<div class="sameLine">
<form action="link1">
<input type="submit" value="Login" />
</form>
<form action="link2">
<input type="submit" value="Register" />
</form>
</div>
I need to select all <input type="submit"> elements, that have no class specifier.
With:
<input class="Submit" type="submit" value="Save" name="action_1">
<input class="Button" type="submit" value="Save as" name="action_2">
<input type="submit" value="Save and Continue" name="action_3">
<input class="Cancel" type="submit" value="Cancel" name="action_4">
It should select the 3rd one only.
I can imagine this CSS:
input[type="submit"]:not(ANY CLASS){
}
But, what should I write as "ANY CLASS"? Or is there a different approach alltogehter? I could enumerate all known classes there, but this is tedious and might change over time.
Note:
I am looking for a CSS-only solution. This makes this answer not a
duplicate.
I want to specify "no classes at all" not omitting one
single class. This makes this answer not a duplicate.
You could use :not([class]), which means select an input element that does not have a class attribute.
input[type="submit"]:not([class]){
color: red;
}
<input class="Submit" type="submit" value="Save" name="action_1">
<input class="Button" type="submit" value="Save as" name="action_2">
<input type="submit" value="Save and Continue" name="action_3">
<input class="Cancel" type="submit" value="Cancel" name="action_4">
You can use a selector like this:
input:not([class]) {
/* style for inputs without classes */
}
JSFIDDLE DEMO
reference
I have submit and reset buttons for a form, and I cant for the life of me figure out how them to get under the textbox. And then the address element is displaying on the right side aswell.
<label id="warranty">
<input type="checkbox" name="warranty" />
Yes, I want the 24-month extended warranty
</label>
<label for="request" id="request">Any special requests on your order?</label>
<textarea name="request" id="request"></textarea>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</form>
CSS:
input[type="submit"], input[type="reset"] {
display: inline-block;
width: 150px;
float: inline;
}
Surely I'm missing something right?
CSS
#request { display: block; clear: both; }
Working Fiddle
How about a line break after the textarea?
ie:
<label for="request" id="request">Any special requests on your order?</label>
<textarea name="request" id="request"></textarea>
<br />
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
or via css, you could make the first of the 2 buttons clear any previous floats;
input[type="submit"] {
clear: both;
}
Instead of display: inline-block; try display: block; for either your text area (doing this will say "put nothing else on the the same line as this element unless it floats", or for your submit order and cancel buttons.
I'd also suggest putting your two buttons inside of a wrapper div so that way you can manipulate the position of those two buttons as a unit instead of individually.
Also, one last note: don't have more than one element on a page with the same id. For elements you want to apply the same properties to, make the id a class instead.
You can use a div to wrap them.
I don't see "address element", so I can't help you.
<div>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</div>
You can try this working fiddle!
<form>
<label id="warranty">
<input type="checkbox" name="warranty" />
Yes, I want the 24-month extended warranty
</label>
<label for="request" id="request">Any special requests on your order?</label>
<div class="clear:both"></div>
<textarea name="request" id="request"></textarea>
<div class="clear:both"></div>
<input type="submit" value="Submit Order" />
<input type="reset" value="Cancel" />
</form>