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.
Related
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">
So i am trying to get my buttons to show up left or right of another button, and instead of on top/bottom of the button. I'm new to all of this and would love to figure this out.
Here is my code, what could i apply to it that would make them stack left/right?
<form action="">
<input type="submit" value="Contact me">
</form>
there is a lot of ways to do this, but you can try float css property as follow:
input[type="submit"]{
float:left;
display:inline-block;
}
input[type="button"]{
float:right;
display:inline-block;
}
<form action="">
<input type="submit" value="Contact me">
<input type="button" value="another button">
</form>
Try researching the float property in CSS here. You can alter the visual flow of your HTML document by doing so, e.g.
#button1 {
float: right;
}
#button2 {
float: left;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="width: 50%;">
<input id="button1" type="button" value="button 1">
<input id="button2" type="button" value="button 2">
<input id="button3" type="button" value="button 3">
</div>
</body>
</html>
If I am getting your problem correctly, you meant to say that you wanted to get the buttons in this form side to each other instead of one below the other. According to me, when you will add another button in this form, it will appear at the side of the first button only. But don't give <br/> tag between buttons and even do not put them into the separate <div> tags.
Here is the sample of my code I did for you:
<html>
<head>
<title>Button Left/Right</title>
<link src="style.css" rel="stylesheet" type="text/css"/> //add this line if you want to add css otherwise ignore this line and remove from code
</head>
<body>
<form action="">
<input class="btn" type="submit" value="Contact me"> //observe I have given class to the buttons
<input class="btn" type="submit" value="Contact me Button 2">
</form>
</body>
</html>
In case if it is not working, then create the following style.css file inside the directory where you have the current html file. And in the style.css file add following lines:
.btn{
display:inline-block;
}
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.
I want to put margins/spacing between each of these four Buttons. I am struggling a bit with the css. The following code does not give me space between each Button. Does anyone know what I need to change?
practice.html
<div>
<input type="button" id="button0" style="color:black; width:100px; height: 50px" />
<input type="button" id="button1" style="color:black; width:100px; height: 50px" />
<input type="button" id="button2" style="color:black; width:100px; height: 50px" />
<input type="button" id="button3" style="color:black; width:100px; height: 50px" />
</div>
practice.css
.button{
margin: 20px;
}
.button is responsible for class. You should write
button {margin: 20px;}
Thats all :). Remember that button should have display: block or display: inline-block, so the element can render margin property properly.
Example of different CSS selectors:
button {} // <button>
.buttonclass {} // <button class="buttonclass">
#buttonid {} // <button id="buttonid">
add class="button" for each button:
<input class="button" type="button" id="button0" style="color:black; width:100px; height: 50px" />
.button is a class selector and you have no classes set. button as a selector won't work with the given HTML as the element is input. The correct css would be
input[type="button"]
{
margin:20px;
}
input[type="button"] {
color: black;
width: 100px;
height: 50px;
margin: 20px;
}
<div>
<input type="button" id="button0" />
<input type="button" id="button1" />
<input type="button" id="button2" />
<input type="button" id="button3" />
</div>
From your comments it sounds like there is another style being applied from somewhere. You may need to make a more specific selector.
Try
div input[type="button"]
{
margin:20px;
}
Also use Chrome Developer tools or Firebug for Firefox to inspect the buttons to see what styes are being applied to your buttons. Don't forget to flush your cache as well (ctr +f5) as CSS is cached by the browser.
More info on getting started with CSS Selectors
My code for a button wont work. My goal is to get the width longer, but it has no effect. Here is a snippet of code from it, where the errors should be:
<form action="http://kindust.com/test.html">
<input type="submit" value="Shop" width="150">
</form>
CSS
.btn{
width: 150px;
}
HTML
<form action="http://kindust.com/test.html">
<input class="btn" type="submit" value="Shop">
</form>