Is it possible to change the button css based on values. I want to have different css for Save and different css for Cancel for type button.
Ex:
<input type="button" value="Save">
<input type="button" value="Cancel">
save { /* Some CSS */ }
cancel{ /* Some CSS */ }
NOTE : I cannot use class as all the input is having same class as there are plenty of buttons. Also I dont want to use Jquery.
Yes, with an attribute selector.
input[value="Save"] {
color: red;
}
input[value*="Cancel"] {
color: blue;
}
<input type="submit" value="Save">
<input type="submit" value="Cancel">
<input type="text" value="Cancel-me-too">
To target specific button type you need more than one attribute selector
input[type="submit"][value="Save"] {
color: red;
}
input[type="submit"][value*="Cancel"] {
color: blue;
}
<input type="submit" value="Save">
<input type="submit" value="Cancel">
<input type="text" value="Save">
Use CSS Attribute Selectors :
input[value="Save"] {background:green;}
input[value="Cancel"] {background:grey;}
I think jquery seems to be no need.
Button is large, the class must be used.
Try this code.
<style type="text/css">
input[value="Save"] {
color: green;
}
input[value*="Cancel"] {
color: black;
}
</style>
<input type="submit" value="Save">
<input type="submit" value="Cancel">
Related
I'm having a problem with buttons in CSS.
Between the first two I get the right distance, but between the second and the third I get two buttons joined (attached) (as in the picture).
How can I solve this problem?
.buttons {
display: flex;
}
.buttons form {
margin: 0 10px;
}
<div class="buttons">
<form action="createArt.html">
<input type="submit" value="ADD" />
</form>
<input type="button" value="EDIT" onclick="confirmation_edit()" />
<input type="button" value="DELETE" onclick="confirmation_delete()" />
</div>
#container {
display: flex;
//justify-content:space-around;
}
.butts, form {
margin-left: 10px;
}
<div id="container">
<form action="createArt.html">
<input type="submit" value="ADD" >
</form>
<input class='butts'type="button" value="EDIT" >
<input class='butts' type="button" value="DELETE" >
</div>
Change .buttons form by .buttons > *
.buttons > * { margin: 0 10px; }
You selector is faulty, u have selected 'bottom form, INSTEAD of botto. The later would have selected all the 3 buttons n have applied the CSS rules to all the 3.
You would probably be better served with a specific class on the button but here I added the selector the the input based on type (probably not the way to do this; classes should be used to style)
.buttons {
display: flex;
}
.buttons form ,
.buttons input[type="button"] {
margin: 0 10px;
}
<div class="buttons">
<form action="createArt.html">
<input type="submit" value="ADD" />
</form>
<input type="button" value="EDIT" onclick="confirmation_edit()" />
<input type="button" value="DELETE" onclick="confirmation_delete()" />
</div>
As an option it is suitable for small projects, but for a larger project I recommend using classes.
To add styles to an element you can use: element Selector, id Selector, class Selector.
More information can be found here
.buttons {
display: flex;
}
.buttons form {
margin: 0 10px;
}
input:nth-child(2){
margin: 0 10px 0 0;
}
<div class="buttons">
<form action="createArt.html">
<input type="submit" value="ADD" />
</form>
<input type="button" value="EDIT" onclick="confirmation_edit()" />
<input type="button" value="DELETE" onclick="confirmation_delete()" />
</div>
<ul class="form_no_bullet">
<li class="form_li_pad"><input name="password" type="password" class="form-input" placeholder="Confirm Password" required></li><br>
<li class="form_li_pad"><input type="submit" value="Register"></li>
</ul>
// It should apply on this specific class="form_li_pad" type=submit and other type=submit should not change
// this style is targeting all the type=submit button/inputs
CSS
input[type=text] {
}
input[type=text]:focus {
}
input[type=submit] {
}
I have created a demo for you, see if this works. Read more about selectors here.
input[type=submit]{
color: blue;
}
input[type=submit].xyz{
color: red;
}
.any_class input[type=submit]{
color: green;
}
<input type="submit" value='Submit'>
<input type="submit" class="xyz" value='Submit with class'>
<div class="any_class">
<input type="submit" class="xyz" value='Submit within a class'>
</div>
I am have the following form:
<form>
<input type="text" id="search_bar" name="search_bar" value="" placeholder="Zip Code or City">
<input type="submit" id = "search_bar_submit_button" name="search_bar_submit_button" value="Search">
</form>
and the following css:
#search_bar, #search_bar_submit_button{
height: 5em;
}
The search bar is now 5em but the submit button's height has not changed. I have seen answers that suggest using <input type="submit" height = "x">, but feel there has to be a way to do this with CSS?
input[type=submit] {
font-size: 5em;
}
<input type="submit" value="Submit">
Please replace <input type='submit' with <button type='submit'.
This will also allow you to apply proper CSS. Please see example below.
input[type='submit'] {
height: 5em;
}
button[type='submit'] {
height: 5em;
}
<input type='submit' value='Search'/>
<button type='submit'>Search</button>
Please go through following link for more details on it.
input type="submit" Vs button tag are they interchangeable?.
This may help CSS
#search_bar_submit_button{
max-height: 50px;
}
You can try below code.
#search_bar_submit_button {
width: 10em;
height: 4em;
}
<form>
<input type="text" id="search_bar" name="search_bar" value="" placeholder="Zip Code or City"><br/><br/>
<input type="submit" id = "search_bar_submit_button" name="search_bar_submit_button" value="Search">
</form>
I have an input field as:
<input type="image" name="submit" value="submit" src="images/searchb1.png" id="button1"/>
Now I want to increase the size of the text Submit on that field. How can I achieve that using css?
with css:
input{font-size: SIZE;}
NEW CODE
Made Changes, because you needed to increase the submit button font size
input
{
font-size:40px;
}
or
input[type='submit']
{
font-size:40px;
}
<input type="submit" value="Submit">
OLD CODE
Try This code
input[type='text']
{
font-size:30px;
}
or
input
{
font-size:30px;
}
<input type="text" placeholder="Enter text here">
Your html
<input type="button" value="Submit"/>
CSS
input{
font-size: 16px;
}
CSS, if you make your HTML input more specific we can be more specific. As of now, here is a general way of doing it.
input{font-size: 50px;}
You can use this if you want to use inline css.
<input type="button" value="Submit" style="font-size:20px;"></input>
Alternatively page/external css;
<input id="btn" type="button" value="Submit"></input>
CSS
input{
font-size:20px;
}
I also created a jsfiddle that you can edit easily to your liking.
https://jsfiddle.net/t048Lk5z/
html:
input type="button" id="SubmitButton" value="Submit" />
Css:
input#SubmitButton{
font-size: 10em;
}
Check out w3 schools information about it.
When i am using HTML To create a form the buttons are on different sizes (as size of inputted values).
It is possible to set a proper width for HTML Buttons With Out using CSS.
<form>
<input type="button" value="input"><br>
<input type="button" value="ok">
</form>
Option1
See example http://jsfiddle.net/mScnX/
HTML:
<form>
<input type="button" value="input" id='button1'><br>
<input type="button" value="ok" id ='button2'>
</form>
CSS:
#button1 {
width:400px;
}
#button2{
width:100px;
}
Option 2:
See example: http://jsfiddle.net/mScnX/2/
HTML:
<form>
<input type="button" value="input" style="width:400px"><br>
<input type="button" value="ok" style="width:100px"'>
</form>
You have a couple options.
1) You can use inline styles (not best practice)
<button style="width: 50px; height: 20px;">Click Me</button>
OR
2) You can use this in a style tag in the head of your page or in an external style sheet.
button {
width: 50px;
height: 20px;
}
There is no other way to style the html elements. But there is a way to style each button with tag in your html. Just add
<style>
input[type="button"] {
width: 13px;
}
</style>
It's a alternative but is not a good practice at all.