So I have these black boxes go round the input area on the form I am building. Is there a way I can remove this, I am also using bootstrap not sure if that is affecting it but if there is any ideas. Greatly appreciated!
.form-input-styling {
border-radius: 0 2em;
padding: 0 10px;
width: 50%;
border: none;
line-height: 2em;
margin-bottom: 20px;
background-color: #f25b43;
}
<div class="row">
<div class="col-12"><input class="form-input form-input-styling" type="text" id="fname" name="fname" required placeholder="Name"></div>
<div class="col-12"><input class="form-input form-input-styling" type="email" id="email" name="email" required placeholder="Email"></div>
<div class="col-12"><input class="form-input form-input-styling" type="tel" id="phone_num" name="phone_num" placeholder="Phone Number"></div>
<div class="col-12"><textarea id="text-area" name="textarea" rows="4" cols="50" placeholder="Enter Your Message Here"></textarea></div>
<div class="col-12"><input type="submit" value="Submit"></div>
</div>
Add outline: none; to your css for the input element.
.form-input-styling {
border-radius: 0 2em;
padding: 0 10px;
width: 50%;
border: none;
outline: none;
line-height: 2em;
margin-bottom: 20px;
background-color: #f25b43;
}
Related
I am trying to create an inline form where the label is on top of the input like in a bootstrap form. I have tried various options and although i have menaged to get the label on top of the input, the layout breaks after the first 2 inputs.
I have done a screenshot and would appreciate it someone could check my code and point out my error. many thanks
BTW:
The form-group i am using is not to be confused with the bootstrap
form-group.
.form-group {
display: inline-block;
margin-bottom: 0 !important;
margin-top: 10px !important;
width: 45%;
padding: 5px 5px;
}
.form-area {
background-color: #161616;
padding: 10px 40px 20px;
margin: 10px 0px 50px;
border: 1px solid #111;
}
.form-control {
background: -moz-linear-gradient(90deg, rgba(64, 64, 64, 1) 0%, rgba(33, 33, 33, 1) 100%) repeat scroll 0 0 padding-box !important;
border-radius: 5px;
box-shadow: 0 0 2px #4b4b4b inset, 0 1px 1px rgba(0, 0, 0, 0.3) !important;
color: #fff !important;
font-size: 0.875rem;
line-height: 1.43;
min-height: 2.8em !important;
padding: 0.5em 1.07em;
border: none;
color: #999 !important;
}
#editForm {
display: inline;
}
.labelStyle {
display: block;
color: black;
margin-left: 5px;
font-size: 14px;
}
.svcBorder {
border: 1px solid #2d2d2d;
border-radius: 5px;
padding: 15px;
margin-bottom: 5px;
margin-top: 30px;
}
input[type="text"] {
display: block;
width: 100%;
height: 24px;
border-radius: 5px;
margin-top: 5px;
padding: 4px 8px 0;
font-size: 14px;
color: dimgrey;
-webkit-box-sizing: border-box;
/* For legacy WebKit based browsers */
-moz-box-sizing: border-box;
/* For legacy (Firefox <29) Gecko based browsers */
box-sizing: border-box;
}
<form id="editForm" name="editForm" style="display: none;">
<div id="message">
<div class="text"></div>
</div>
<div class="form-group">
<label class="labelStyle" for="id">id</label>
<input id="id" name="id" readonly type="text" value="">
</div>
<div class="form-group">
<label class="labelStyle" for="service">Service</label>
<input id="service" name="service" type="text" value="">
</div>
<div class="form-group">
<label class="labelStyle" for="activity">Activity</label>
<input id="activity" name="activity" type="text" value="">
</div>
<div class="form-group">
<label class="labelStyle" for="dept">Department</label>
<input id="dept" name="dept" type="text" value="">
</div>
<div class="form-group">
<label class="labelStyle" for="company">Company</label>
<input id="company" name="company" type="text" value="">
</div>
<div class="form-group">
<label class="labelStyle" for="user">User</label>
<input id="user" name="user" type="text" value="">
</div>
<div class="form-group">
<label class="labelStyle" for="item">Item</label>
<input id="item" name="item" type="text" value="">
</div>
<div class="form-group">
<label class="labelStyle" for="date">Date</label>
<input id="date" name="date" type="text" value="">
</div>
</form>
According to your screenshot, this seems to affect the very first field in your form only - so the element preceding it,
<div id="message"><div class="text"></div></div>
likely has something to do with that ...
We didn’t see any styling for that in your code snippet, but if it has margins/paddings/borders or anything like that set, it might still influence the position of the following elements, even if it is currently “empty” (as in, no text content.)
2 things are bothering me atm...
First:
I'm trying to create a contact section with few simple text input labels, one of which has several rows displayed. That would be the "message" ofc.
The problem is that i cant find where and how can i add those rows and limit how many cols can be typed in every row.
Second:
How can i make them clickable/editable? When i add them to website they have placeholders but i cant click and enter text inside them (lets say to fill out a form)...
The code snippet is below, and THANK YOU for helping me to learn that stuff...
.kontakt {
display: block;
padding-top: 10px;
padding-bottom: 15px;
padding-left: 15px;
padding-right: 15px;
border: 3px solid #20202f;
border-radius: 10px;
position: absolute;
top: 50px;
left: 50px;
font-size: 24px;
background-color: rgba(51, 52, 89, 0.85);
}
#yourname {
font-size: 20px;
margin-bottom: 10px;
}
#mail {
font-size: 20px;
margin-bottom: 10px;
}
#message {
font-size: 20px;
margin-bottom: 25px;
}
.messagebutton {
width: 75px;
height: 35px;
font-size: 15px;
border-radius: 5px;
background-color: #bfbfff;
color: black;
margin-left: 172px;
margin-bottom: 5px;
}
<div class="kontakt">
<div class="nametext">
<label for="ime">your name</label>
</div>
<div class="namebox">
<input type="text" id="yourname" placeholder="your name">
</div>
<div class="mailtext">
<label for="mail">e-mail</label>
</div>
<div class="mailbox">
<input type="email" id="mail" placeholder="your email">
</div>
<div class="messagetext">
<label for="Message">message</label>
</div>
<div class="messagebox">
<input type="text" id="message" placeholder="Your message goes here">
</div>
<button type="button" class="messagebutton">SEND</button>
</div>
Awesome stuff!
To get a multi-line message, use the textarea tag, rather than the input. So,
<div class="messagebox">
<textarea id="message" rows="3" placeholder="Your message goes here"></textarea>
</div>
The ROWS attribute will get your number of lines, or you can use the browser default.
https://www.w3schools.com/tags/tag_textarea.asp
As for being editable, they are by default - and your example seems to be working correctly.
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 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;
}
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;
}