I have this registration form I am setting up and I've set the page's background to grey. I want the area in the center, where you're supposed to fill in the info, to be white. How should I do this?
I've included a picture of how the site looks now, the white part should cover the text and all the boxes.
My css code for background:
body{
background-color:#D2D7D3;
background-size:1500px 1000px;
z-index:0
position:absolute;
}
This is something you could do, wrap your form contents in a div and style the div around it.
This will create the white part you want behind the form.
Example Form
<div class="form-container">
<form>
<label for="email"> Email </label>
<input type="text" name="email"></input>
<label for="password"> Password </label>
<input type="text" name="password"></input>
<button type="submit"> Register </button>
</form>
</div>
In your CSS
.form-container {
width: 300px;
height: 300px;
background-color: #fff;
}
Related
Im crating a form with many fields and a checkboxes, the problem is that im trying to customize the checkbox(unsuccessfully) according with the style of my form.
As you can see in the picture, the tick of the checkbox is black, and i need it green. How can I change the color? How can I change the size of checkbox?
This is my HTML:
<div id="Cajamitad1">
<form role="form">
<div class="checkbox">
<label><input type="checkbox" value="" >
<a class="FontStyle">Vegano</a>
</label>
</div>
< div class="checkbox">
<label><input type="checkbox" value="">
<a class="FontStyle">Diabetico</a>
</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="">
<a class="FontStyle">Celiaco</a>
</label>
</div>
</form>
</div>
and this my CSS:
#ContForm{
display: inline;
box-sizing: border-box;
}
.checkbox{
margin: 10px;
padding: 10px;
}
.checkbox input[type="checkbox"]{
margin-left: 5px;
}
#Cajamitad1{
margin-top: 10px;
width: 40%;
float: left;
padding-left: 200px;
}
Correct me if I'm wrong, but as far as I know this is not possible.
Here is my reasoning: if you inspect the bootstrap checkbox then you see that the checkbox itself is drawn by an <input type="checkbox"> and you have very limited control over that. Some browsers let you change the size of the checkbox but not all of them.
So the only thing you can do is to make your own checkbox, e.g. by using two images and some css.
Or often more mobile friendly are just two buttons side by side "yes" and "no". Then if you click one it becomes active, like some kind of toggle button.
I'm putting together a simple form to deposit a set amount of money. The form has 4 radio buttons.
<form action="deposit.php" method="post">
<fieldset>
<div class="form-group">
<input type="radio" name="deposit" value="100"> $100
<br>
<input type="radio" name="deposit" value="250"> $250
<br>
<input type="radio" name="deposit" value="500"> $500
<br>
<input type="radio" name="deposit" value="1000"> $1,000
<br>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Deposit</button>
</div>
</fieldset>
</form>
Here is the output:
You can see that the last radio button is not vertically aligned. I realize that there are 2 extra characters in the text after the button. I'm no CSS wizard and haven't really found the answer to making these buttons straight. Any ideas?
EDIT: CSS code here:
.container {
/* center contents */
margin-left: auto;
margin-right: auto;
text-align: center;
}
input[type='radio'] {
width: 20px;
}
The form is in the container
In your CSS file or within your HTML code you are using the "align centre" setting. Thats why is not aligned.
This is the output of your above code with the align centre setting:
And this is the output of your code without the align centre setting:
Somewhere in your code you are setting the below div class to align centre.
// Removing the align setting will solve the issue. If its not in-line CSS then check you external CSS file.
<div class="form-group" align="center">
Hope this helps.
Why not use tables to make the buttons align (its easier with dreamweaver as your editing tool)
I'm a CSS/HTML novice and I haven't really found how to do this by searching. I have a simple login page where a person enters in a username and password. The page has a large background image. I want to create a rounded box that the two text fields (username and password) and the submit button goes into and sits on top of to further separate form the background image. Here is the main part of the html file, I just want to know what should I put into the container section of the CSS file to get a rounded white box .
<div class="container">
<form class="form-signin" role="form" name='f'
action='${pageContext.request.contextPath}/j_spring_security_check' method='POST'>
<h2 class="form-signin-heading">Please sign in</h2>
<input type='text' name='j_username' class="form-control" placeholder="Username"
required autofocus>
<input type='password' name='j_password' class="form-control"
placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
As far as a box goes, you can just create a div for that(as I see you've done: .container). To round the corners, you'll want to use the CSS property border-radius:
HTML:
<div id="example1">Hello!</div>
CSS:
#example1 {
width: 100px;
background: green;
border-radius: 15px;
margin: 0 auto;
text-align: center;
}
JSFiddle Example
It appears you have a bootstrap example. First, you need to use bootstrap (http://getbootstrap.com) then add a class that suits you best to container. I recommend the classes "well", "thumbnail", and "jumbotron". Visit the CSS section on the bootstrap site to see these rendered. If you don't want to use bootstrap, just copy the CSS code and apply it to your example.
I have a text form in which the user should enter an email address. I would like this text form to have an image as a background.
Here's what I have so far:
HTML:
<form action="addemailtodatabase.php" method="post">
<input class="emailinput" type="text" name="email" maxlength="80"/>
<input type="submit" name="submit" value="Sign Up"/>
<input type="hidden" name="submitted" value="TRUE"/>
</form>
CSS:
.emailinput{
background-image:url(images/desktop/field-normal.png);
background-repeat:no-repeat;
border:none;
width:296px;
height:62px;
}
I can't get rid of the white background behind the image (it's not the image file, that has rounded corners and no white bits).
Here's what it looks like:
Any suggestions? Thanks.
Since you are not using a resetting or default style clearing stylesheet you'll need to set the background-color property as well. You can set it to transparent.
Your CSS will be like this:
.emailinput{
background-image: #000 url(images/desktop/field-normal.png) no-repeat;
border:none;
outline:none;
width:296px;
height:62px;
}
I want to have two elements stay on the same row.
Right now I have this code:
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="textinput">Text:</label>
<input type="text" id="textinput"/>
<input type="button" id="searchbutton" data-icon="search" data-iconpos="notext" onclick="function()"/>
</fieldset>
This works. The label, the input field and the button will all be on the same row as long as you view it in fullscreen in your computer browser. But if we make the window smaller, all three elements will be shown on one row each. Is there any way to make the label appear on one row, and the input field + button on the row below?
You need to override the jQM enhancements:
http://jsfiddle.net/E4EVT/10/
http://jsfiddle.net/E4EVT/36/ (Using the grid layout)
http://jsfiddle.net/E4EVT/42/ (Using the table layout)
JS
$('#textinput2').css('width','60%').css('display','inline');
HTML
<div>
<!-- use span instead of label -->
<span>Text:</span>
<input type="text" id="textinput2"/>
<br />
<input type="button" id="searchbutton2" data-icon="search" data-iconpos="notext" onclick="function()"/>
</div>
I think you might want to look into the grid layout jQM offers
http://jquerymobile.com/demos/1.0rc1/docs/content/content-grids.html
For Jquery Mobile 1.2.0
<div class="ui-grid-a" >
<div class="ui-block-a"><input type="text" /></div>
<div class="ui-block-b"><input type="text" /></div>
</div>
you need to add attribute data-inline="true" to the input elements.
CSS:
label {
display: block;
}
input {
padding: 2px;
width: 100px;
}
.wrap {
width: 212px; /* the width of twice your input (plus borders) */
}
And your HTML:
<fieldset data-role="controlgroup" data-type="horizontal">
<label for="textinput">Text:</label>
<div class="wrap">
<input type="text" id="textinput"/>
<input type="button" id="searchbutton" data-icon="search" data-iconpos="notext" onclick="function()"/>
</div>
</fieldset>
http://jsfiddle.net/ahallicks/BWsdk/
Edit:
Sorry, misread your question! If you want them all on the same line to start with use the following CSS:
label {
float: left;
margin-right: 12px;
}
input {
padding: 2px;
width: 100px;
}
.wrap {
float: left;
width: 212px; /* the width of twice your input (plus borders) */
}
http://jsfiddle.net/ahallicks/E4EVT/