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
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>
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;'>
I'm creating a web app and can't seem to figure this out.
I have a button here:
<form action="test" method="post" >
<input type="Submit" name="Submit" class="btn btn-lg btn-default">
</form>
When I test the code on my website, the button shows as follows:
How can I change the text of the button so that instead of it saying "Submit" it says "Home"? I've tried changing the name property of the button, but it still says "Submit".
I don't really know much about CSS and HTML, so if someone can walk me through on how to do this- that would be great.
Thanks :)
<form action="test" method="post" >
<input type="Submit" name="Submit" value="Home" class="btn btn-lg btn-default">
</form>
Home ---- > Change it to whatever you want
You can use value="your text here" inside, as follow:
<input type="Submit" name="Submit" value="My Text Here" class="btn btn-lg btn-default">
Do not forget to add / for better coding:
<input type="Submit" name="Submit" value="My Text Here" class="btn btn-lg btn-default"/>
<form action="test" method="post" >
<input type="Submit" value="Click Here" name="Submit" class="btn btn-lg btn-default">
</form>
Too easy to change your input type button name
use value attribute in tag
i added a spinet this makes things clear for you. :)
<form action="test" method="post" >
<input type="Submit" value="HOME" name="Submit" class="btn btn-lg btn-default">
</form>
As others have mentioned above, you have to set the value tag and that will be used as the display text. By default a submit button text is submit.
Alternatively, you can use javascript/jquery if you want to change the button text during runtime.
<form action="test" method="post" >
<input type="Submit" name="Submit" value="Click" class="btn btn-lg btn-default">
</form>
THe text of the button can be changed by value="watever"
<form action="test" method="post" >
<input type="Submit" name="Submit" Value="Home" class="btn btn-lg btn-default">
</form>
You can change via value atts
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>