I'm having trouble to move text inside input. If i add margins or paddings it moves or scales the input. I want to move "Username" 10px away from left side.
.log_inp input[type="username"] {
top: 80px;
height: 28px;
width: 234px;
border: solid 1px #e4e4e4;
font-family: OpenSans-Italic;
color: #9a9a9a;
font-size: 13px;
}
input {
padding: 0px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
If you want to only move the placeholders over, use vendor prefix CSS properties:
::-webkit-input-placeholder {
padding-left: 10px;
}
::-moz-placeholder {
padding-left: 10px;
}
:-ms-input-placeholder {
padding-left: 10px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
If you want to change the padding and not have it influence the total size of the input, set box-sizing to border-box.
In the following example, the two inputs are the same size, but I have given the username one a left padding.
.log_inp input {
top: 80px;
height: 28px;
width: 234px;
border: solid 1px #e4e4e4;
font-family: OpenSans-Italic;
color: #9a9a9a;
font-size: 13px;
padding: 0px;
box-sizing: border-box;
}
input[type="username"] {
padding-left:10px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
.log_inp input[type="username"] {
height: 28px;
width: 234px;
border: solid 1px #e4e4e4;
font-family: OpenSans-Italic;
color: #9a9a9a;
font-size: 13px;
padding-left:10px;
}
input {
padding: 0px;
}
<div class="log_inp">
<form action="#">
<input type="username" name="Username" placeholder="Vārds...">
<br>
<input type="password" name="Password" placeholder="Parole...">
<br>
<input type="submit" value="Ienākt">
</form>
</div>
With accepted answer cursor position of input is not modified.
You can move placeholder text of your input along with its cursor position via
input {
text-indent: 10px;
}
https://www.w3schools.com/csSref/pr_text_text-indent.asp
Check it out it might be helps u
input{
text-align:center;
}
Related
I have this sample:
link
CODE HTML:
<div class="input-box">
<label for="option_159" class="required">
Patient Name <em>*</em>
</label>
<input type="text" class="optionli-input input-text product-custom-option required-entry" placeholder="Patient Name" >
</div>
I want to create something like this
example
How can I create such an example only from CSS?
Can you modify my example so I can get something like this please? I want to understand how it was created.
Thanks in advance!
Try below code:
<form>
<fieldset>
<legend>Name:</legend>
<input type="text"><br>
</fieldset>
</form>
This can be done using fieldset-legend
<div class="input-box">
<fieldset>
<legend for="option_159" class="required">Patient Name <em>*</em></legend>
<input type="text" class="optionli-input input-text product-custom-option required-entry" placeholder="Patient Name" >
</fieldset>
</div>
Use this code:
label{
position: absolute;
top: 20px;
left: 15px;
background-color: #fff;
padding: 0px 5px;
font-size: 12px;
}
input{
padding: 10px;
background-color: #fff;
}
<div class="input-box">
<label for="option_159" class="required">Patient Name<em>*</em></label>
<br/>
<input type="text" class="optionli-input input-text product-custom-option required-entry" placeholder="Patient Name" / >
</div>
Use This :
div {
position: relative;
margin: 50px;
}
div input[type] {
border: 1px solid #ccc;
outline: none;
padding: 8px;
width: 300px;
}
div label {
position: absolute;
top: -8px;
left: 10px;
background: #FFF;
color: skyblue;
font-size: 12px;
}
<div>
<label for="option_159">Patient Name<em>*</em></label>
<input type="text" id="option_159" placeholder="Patient Name">
</div>
I am currently working on creating a sign up form html/css. I realised that different browsers work differently on the width of inputs. How can i rectify this issue and make sure that my sign up form is compatible with all browsers. My sign up form works perfectly for chrome as it is where i do coding on.
ul {
background-color: #000000;
}
li a:hover {
background-color: #0cf72a;
}
.word-container {
width: 500px;
height: 50px;
margin: auto;
position: relative;
top: 80px;
}
.word-container h1 {
margin: 0;
text-align: center;
color: #ab0a0a;
}
.register-container {
width: 600px;
height: 350px;
margin: auto;
position: relative;
top: 100px;
border: 1px solid #000;
}
.fname input[type="text"] {
position: relative;
left: 115px;
top: 30px;
padding: 8px;
}
.lname input[type="text"] {
position: relative;
left: 314px;
top: -5.5px;
padding: 8px;
}
.userid input[type="text"] {
position: relative;
left: 115px;
padding: 8px;
top: 10px;
}
.pwd input[type="password"] {
position: relative;
padding: 8px;
left: 115px;
top: 25px;
}
.email input[type="email"] {
position: relative;
padding: 8px;
left: 115px;
top: 40px;
}
.btn button[type="submit"] {
position: relative;
left: 115px;
top: 55px;
padding: 8px;
width: 382px;
border: 1px solid #000000;
color: #ffffff;
background-color: #ab0a0a;
}
div.btn button[type="submit"]:hover {
background-color: rgb(255, 0, 0);
}
<div class="word-container">
<h1>Create your account</h1>
</div>
<div class="register-container">
<form action="" method="POST">
<div class="fname">
<label>
<input type="text" placeholder="First Name" name="fname" size="20">
</label>
</div>
<div class="lname">
<label>
<input type="text" placeholder="Last Name" name="lname" size="20">
</label>
</div>
<div class="userid">
<label>
<input type="text" placeholder="Username" name="userid" size="50">
</label>
</div>
<div class="pwd">
<label>
<input type="password" placeholder="Password" name="pwd" size="50">
</label>
</div>
<div class="email">
<label>
<input type="email" placeholder="Email Address" name="email" size="50">
</label>
</div>
<div class="btn">
<button type="submit">Create Account</button>
</div>
</form>
</div>
It's always a good idea to use something like normalize.css or any other CSS reset code (eric meyer css reset is very popular too) to reset CSS across all browsers.
Any browser come with it's defaults values for padding's,margins,widths, heights etc...
I guess it won't be an 100% solution but it will defiantly will take you closer to what you're looking for.
Do not jump to position relative and absolute. If you are new to all this, I can understand it seems the most natural way to go about positioning elements; just using a top and left position and that's that. But this is not how you should do it on the web!
Below you can find how I would do it.
Matan G. is right in pointing out that a CSS reset/normalize is often used, and I do so myself as well. However, before you do that (and considering you're new) it would be wise to take a look at the code that I posted and see if it makes any sense to you. If not, ask.
It is important to note that you should avoid these things when possible:
setting a fixed width to text items such as headings, paragraphs, lists.
using relative/absolute positioning. They are very useful but only when necessary.
using too many divs/classes than actually needed. Don't overcrowd your HTML.
* {box-sizing: border-box;}
ul {
background-color: #000000;
}
li a:hover {
background-color: #0cf72a;
}
.word-container {
width: 500px;
height: 50px;
margin: 80px auto auto;
}
.word-container h1 {
margin: 0;
text-align: center;
color: #ab0a0a;
}
.register-container {
width: 600px;
margin: 20px auto auto;
border: 1px solid #000;
padding: 20px;
}
label {
display: block;
}
.name::after {
content: "";
display: table;
clear: both;
}
.name label:first-child {
margin-right: 20px;
}
.name label {
width: calc(100% / 2 - 10px);
float: left;
}
input, [type="submit"] {
padding: 8px;
margin-bottom: 20px;
width: 100%;
}
[type="submit"] {
border: 1px solid #000000;
color: #ffffff;
background-color: #ab0a0a;
margin: 0;
}
[type="submit"]:hover {
background-color: red;
}
<div class="word-container">
<h1>Create your account</h1>
</div>
<div class="register-container">
<form action="" method="POST">
<div class="name">
<label>
<input type="text" placeholder="First Name" name="fname">
</label>
<label>
<input type="text" placeholder="Last Name" name="lname">
</label>
</div>
<label>
<input type="text" placeholder="Username" name="userid">
</label>
<label>
<input type="password" placeholder="Password" name="pwd">
</label>
<label>
<input type="email" placeholder="Email Address" name="email">
</label>
<button type="submit">Create Account</button>
</form>
</div>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML Forms</title>
<style>
.container{
width: 45%;
margin: auto;
}
.form-content{
margin: 40px;
}
.form-content input{
width: 100%;
}
label{
font-weight: bold;
}
input[type=text],[type=email],[type=tel],[type=date],[type=password]{
font-size: 16px;
border-radius: 5px;
background: #D9F1F7;
border: #000000;
padding: 10px;
}
input[type=submit]{
background: #4C63ED;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 16px;
color: #fff;
cursor: pointer;
}
input[type=submit]:hover{
background: #330EEF;
font-weight: bold;
}
</style>
</head>
<body>
<div class = "container">
<form name="signup" method="get" action="">
<div class="form-content">
<label>First Name : </label>
<input type="text" name="firstname" />
</div>
<div class="form-content">
<label>Last Name : </label>
<input type="text" name="lastname" />
</div>
<div class="form-content">
<label>E-Mail : </label>
<input type="email" name="email" />
</div>
<div class="form-content">
<label>Telephone : </label>
<input type="tel" name="telephone" />
</div>
<div class="form-content">
<label>Date of Birth : </label>
<input type="date" name="dob" />
</div>
<div class="form-content">
<input type="submit" name="submit" value="Submit" />
</div>
</form>
</div>
</body>
</html>
I am creating a registration form and am wondering how can I move the whole form to the center of the page? right now its all on the left side of the container, I want it to look a bit something like this: https://id2.s.nfl.com/fans/register?returnTo=http%3A%2F%2Fweeklypickem.fantasy.nfl.com%2F
#Regcontainer {
width: 1200px;
margin: 70px auto;
border: 1px solid;
background-color: aliceblue;
top: 0;
}
.Regcontainer h1 {
font-size: 40px;
font-family: 'Helvetica Neue', sans-serif;
color: black;
line-height: 1;
padding-left: 35px;
padding-top: 35px;
color: black;
}
input {
display: inline-block;
margin: 10px;
}
input[type=text] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
box-shadow: #212121;
}
input[type=password] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
padding: 5px 10px 5px 10px;
}
input[type=submit] {
background-color: #ff0000;
border: 1px solid #212121;
border-radius: 5px;
color: aliceblue;
font-weight: bold;
}
#back_form {
justify-content: center;
}
<div id="Registercontainer">
<div class="RegForm">
<h1> </h1>
<div id="back_glob">
<div id="back_form">
<form method="POST">
<label>FIRST NAME</label>
<input type="text" name="FName" />
<label>LAST NAME</label>
<input type="text" name="SNAME" />
<br/>
<label>EMAIL ADDRESS</label> <input id="email" name="email" type="text" />
<BR/>
<label>CREATE YOUR USERNAME</label> <input name="uname" type="text" /> <br/>
<label>CREATE PASSWORD</label> <input name="pass" type="password" />
<br/>
<input type="submit" name="valid" value="REGISTER" />
</form>
</div>
</div>
</div>
Here is the solution I came up with... but what does it do?
#Registercontainer needs to be on the center of the page. Meaning, your fixed with of 1200px is not going to work too well. I took the approach of reducing the size of your from container to give a better look and feel like this:
#Registercontainer {
max-width: 600px;
min-width: 320px;
width: 100%;
/* ... your other properties here ... */
}
Another note, your <label> needs the for attribute as specified in this article.
Let me know if you have any questions, FYI there are many ways to make this work for you.
#Registercontainer {
max-width: 600px;
min-width: 320px;
width: 100%;
margin: 70px auto;
border: 1px solid;
background-color: aliceblue;
top: 0;
padding: 15px;
}
.Regcontainer h1 {
font-size: 40px;
font-family: 'Helvetica Neue', sans-serif;
color: black;
line-height: 1;
padding-left: 35px;
padding-top: 35px;
color: black;
}
input {
display: inline-block;
margin: 10px;
}
input[type=text] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
box-shadow: #212121;
}
input[type=password] {
padding: 10px;
border: 2px solid #212;
border-radius: 2px;
padding: 5px 10px 5px 10px;
}
input[type=submit] {
background-color: #ff0000;
border: 1px solid #212121;
border-radius: 5px;
color: aliceblue;
font-weight: bold;
}
#back_form {
justify-content: center;
}
<div id="Registercontainer">
<div class="RegForm">
<h1> Register With NackStack</h1>
<div id="back_glob">
<div id="back_form">
<form method="POST">
<label for="fname">FIRST NAME</label>
<input type="text" name="FName" id="fname" />
<br/>
<label for="sname">LAST NAME</label>
<input type="text" name="SNAME" id="sname" />
<br/>
<label for="email">EMAIL ADDRESS</label>
<input id="email" name="email" type="text" />
<br/>
<label for="uname">CREATE YOUR USERNAME</label>
<input name="uname" type="text" id="uname" />
<br/>
<label for="password">CREATE PASSWORD</label>
<input name="pass" type="password" id="password"/>
<br/>
<input type="submit" name="valid" value="REGISTER" />
</form>
</div>
</div>
</div>
Add margin:auto and a fixed width to the parent <div>. Example:
<div id="Registercontainer" style="margin-left:auto;margin-right:auto;width:250px">
Fiddle:
https://jsfiddle.net/mwatz122/g9ay26x3/
#Registercontainer {
text-align: center;
}
Please try this. It might help.
Put your form within a <div> like this:
<div align="center">
<!-- insert code here -->
</div>
Then in the CSS, add
form {
text-align: left;
}
Who can help me to modify the CSS code to complete the effect of figure 1 to figure 2,I want to figure a text box set as figure 2 styles, I should how to modify the CSS code.
The following is a CSS and HTML code.
.username{
margin-top: 10px;
width: 280px;
height:48px;
background-color: green;
}
.blanline{
width: 280px;
height:23px;
background-color: #F0FFFF;
}
.password{
width: 280px;
height:48px;
background-color: green;
}
div input,button{
width: 100%;
height: 100%;
font-size: 25px;
}
<div class="username">
<input type="text" id="username" name="username">
</div>
<div class="blanline"></div>
<div class="password">
<input type="password" id="password" name="password">
</div>
Who can help me ,i will be grate for you.
You should add a placeholder in the input tag.
<input type="text" id="username" name="username" placeholder="text here">
<input type="password" id="password" name="password" placeholder="text here>
I think you are just asking about a placeholder: JS Fiddle
<input type="text" id="username" name="username" placeholder="placeholder here">
And to style the placeholder text:
::-webkit-input-placeholder {
color: #ddd;
font-weight: 100;
font-size:16px;
line-height: 28px;
}
:-moz-placeholder {
/* Firefox 18- */
color: #ddd;
font-weight: 100;
font-size:16px;
line-height: 28px;
}
::-moz-placeholder {
/* Firefox 19+ */
color: #ddd;
font-weight: 100;
font-size:16px;
line-height: 28px;
}
:-ms-input-placeholder {
color: #ddd;
font-weight: 100;
font-size:16px;
line-height: 28px;
}
There are two possible ways:
1. You can use the HTML5 placeholder attribute:
<input type="text" placeholder="Placeholder text." />
2.You can do this for webkit:
#username::-webkit-input-placeholder::before {
color:#666;
content:"Username";
}
#password::-webkit-input-placeholder::before {
color:#666;
content:"Password";
}
Second may not work in all browsers better go for first.
HTML code:
<div class="username">
<input type="text" id="username" name="username" placeholder="Name">
</div>
<div class="blanline"></div>
<input type="password" id="password" name="password" placeholder="Password">
</div>
CSS code:
.username{
margin-top: 10px;
width: 280px;
height:48px;
background-color: green;
}
.blanline{
width: 280px;
height:23px;
}
.password{
width: 280px;
height:48px;
background-color: green;
}
div input,button{
width: 100%;
height: 100%;
font-size: 25px;
}
For some reason I cannot get the submit button to center. I have tried everything from text-align: center; to margin: 0 auto; to a left and right margin at auto. The button will not center anyway I try. What am I failing to do?
.contactForm {
border: 2px solid black;
background-color: #F0F0F0;
width: 40%;
margin: 0 auto;
padding: 40px;
}
.contactButton {
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
width: 425px;
font-size: 20px;
font-weight: bold;
padding: 14px;
cursor: pointer;
background-color: #800000;
border: none;
color: #FFFFFF;
text-align: center;
}
<div class="contactForm">
<form action="" method="post" id="mycontactform">
<input type="text" class="inputbar" name="name" placeholder="Full Name" required>
<input type="email" class="inputbaremail" name="email" placeholder="Email" required>
<textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
<label for="contactButton">
<input type="button" class="contactButton" value="Send Message" id="submit">
</label>
</form>
</div>
It's hard to center is, because it is inside a label. The label is an inline element too and will size around the button. Therefor text-align: center and other solutions don't work.
In the snippet below, I've made the label show itself as a block element, which automatically occupies the available width of the parent. Then you can easily center the button inside it:
The added piece:
label[for="contactButton"] {
display: block;
text-align: center;
}
The whole code:
.contactForm {
border: 2px solid black;
background-color: #F0F0F0;
width: 40%;
margin: 0 auto;
padding: 40px;
}
.contactButton {
margin-top: 15px;
margin-right: auto;
margin-bottom: 15px;
margin-left: auto;
width: 425px;
/* Make sure the button isn't too wide on small screens */
max-width: 80%;
font-size: 20px;
font-weight: bold;
padding: 14px;
cursor: pointer;
background-color: #800000;
border: none;
color: #FFFFFF;
text-align: center;
}
label[for="contactButton"] {
display: block;
text-align: center;
}
<div class="contactForm">
<form action="" method="post" id="mycontactform">
<input type="text" class="inputbar" name="name" placeholder="Full Name" required>
<input type="email" class="inputbaremail" name="email" placeholder="Email" required>
<textarea rows="4" cols="50" name="message" class="inputbarmessage" placeholder="Message" required></textarea>
<label for="contactButton">
<input type="button" class="contactButton" value="Send Message" id="submit">
</label>
</form>
</div>
Use text-align:center on the parent div.
Fiddle: http://jsfiddle.net/gopal/su3vg018/
.contactForm {
text-align:center;
}
Add this to your css file:
.contactForm label[for="contactButton"] {
display: block;
text-align: center;
}