I'm trying to fixed the underline in all input text type, but without success.
Example:
My code:
input {
width: 100%;
background-color: #fcfcfc;
border: 0;
padding: 10px;
}
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
<label for="endereco">Endereço:</label>
<input class="" id="endereco" type="text" tabindex="2" minlength="5" required>
</div>
Use linear-gradient as background to create a line and you can easily control its size and position like this:
input {
width: 300px;
background:
linear-gradient(#000, #000) center bottom 5px /calc(100% - 10px) 2px no-repeat;
background-color: #fcfcfc;
border: 1px solid;
padding: 10px;
}
<input class="" id="endereco" type="text" tabindex="2" minlength="5" required>
Using the longhand syntax:
input {
width: 300px;
background-image: linear-gradient(#000, #000);
background-position: bottom 5px center;
background-size: calc(100% - 10px) 2px;
background-repeat: no-repeat;
background-color: #fcfcfc;
border: 1px solid;
padding: 10px;
}
<input class="" id="endereco" type="text" tabindex="2" minlength="5" required>
Add a border to the bottom of the input?
input {
width: 100%;
background-color: #fcfcfc;
border: 0;
border-bottom: 2px solid lightgrey;
padding: 10px;
}
<div class="col-lg-6 col-md-6 col-xs-12 col-sm-12">
<label for="endereco">Endereço:</label>
<input class="" id="endereco" type="text" tabindex="2" minlength="5" required>
</div>
Try it:
.custom-input{
border-width: 0px 0px 1px;
border-color: #DADADA;
font-size: 14px;
text-align: left;
letter-spacing: 0px;
color: #323A47;
padding-bottom: 5px;
}
<input type="text" name="" value="12" class="custom-input">
Related
I have a form in a Landing Page. I just wanted to change the margin between inputs:
This is what I have now:
I want to achieve this result:
This is the code:
<input class="input-form-catalogue" type="text" name="name" placeholder="name*" required>
<input class="input-form-catalogue" type="email" name="email" placeholder="email*" required>
<div class="row">
<div class="col-6">
<select name="country" title="country*" class="select-country-form-catalogue selectpicker text-center">
#include('includes.options-country')
</select>
</div>
<div class="col-6" style="padding-right:7.5px;padding-left: 2px;">
<input class="input-form-catalogue" type="text" name="phone" placeholder="phone*" required>
</div>
</div>
These are the classes:
.input-form-catalogue {
width: 100%;
padding: 0.7rem;
border: 0.1px solid #7B7B79;
background: transparent;
margin: 1rem 0;
text-align: center;
}
.select-country-form-catalogue {
width: 100%;
padding: 0.55rem;
border: 0.1px solid #7B7B79;
background: transparent;
margin: 1rem 0;
text-align: center;
color: #7B7B79;
}
I just simply wanted to change the margin attribute on the css classes. So I changed them to:
margin: 0.5rem 0;
But after doing that the placeholders on the text input dissapear. I have no idea why:
Any suggestions? Thank you in advance.
I solved it by adding another class called "press" to each text input, then I changed the CSS to:
.input-form-catalogue.press {
width: 100%;
padding: 0.7rem;
border: 0.1px solid #7B7B79;
background: transparent;
margin: 0.5rem 0;
text-align: center;
}
.contact-form {
transition: .3s;
margin-top: 120px;
/*border: 2px solid black;*/
background-color: rgb(243, 243, 243);
border-radius: 6px;
box-shadow: -4px 12px 11px 5px rgba(0, 0, 0, 0.521);
width: 475px;
height: 550px;
margin-left: 11px;
text-align: left;
align-items: center;
position: sticky;
left: 60%;
top: -20%;
user-select: all;
z-index: 4;
}
.benefit-card {
margin: 20px;
background-color: white;
text-align: center;
border: 1px solid black;
width: 300px;
height: 450px;
top: 0%;
left: 22%;
box-shadow: 2px 2px 12px 2px black;
user-select: none;
}
.benefit-card-header {
border-bottom: 3px dotted black;
padding-bottom: 11px;
}
.benefit-card-image {
-webkit-user-drag: none;
padding-top: 11px;
padding-bottom: 19px;
width: 200px;
filter: drop-shadow(2px 2px 6px black);
}
#help-me {
position: relative;
z-index: 8;
margin-top: -515px;
}
<div class="contact-form">
<h2 class="contact-form-header">Get Your Quote Today!</h2>
<form class="form-bg-pls-send-help">
<label class="contact-input-header" for="email">Email<span class="important-contact-field"> *</span></label>
<br>
<input class="contact-input" name="email" type="email" autocomplete="off" required placeholder="Your company email" />
<label class="contact-input-header" for="company">Company</label>
<br>
<input class="contact-input" name="company" type="text" required placeholder="Who do you work for?" />
<label class="contact-input-header" for="subject">Subject</label>
<input class="contact-input" name="subject" type="text" placeholder="Subject " />
<label class="contact-input-header" for="about">About</label>
<textarea class="long-input contact-input" name="about" type="text" placeholder="What does your company do?"></textarea>
<br><br>
<input class="getquote-button" type="submit" value="Get Quote" />
</form>
</div>
<div id="help-me">
<div class="benefit-card" id="bc">
<h1 class="benefit-card-header" id="bch">World Wide</h1>
<h3 class="benefit-card-description" id="bcd">No matter where you're from or where you're located we will help you grow your company!</h3>
</div>
</div>
I am building a sample website of a company. I have a contact form set up, but the inputs are not clickable when they are in a div tag, but I need the form in one so I can properly style the form.
The form is supposed to require the input, when I click on the Get Quote button it allows me to edit the first input tag. This has never happened to me before and I have tried user-select, checking if the disabled attribute was used, and just about everything I can think of.
Update your css file to:
#help-me{
position: relative;
z-index: -1;
margin-top: -515px;
}
This element is covering the whole screen.
Update the z-index when you need to show it.
Your inputs are not clickable because #help-me covers all of .contact-form due to the way you have used margin-top to position it higher compared to where it would naturally sit.
Consider using flexbox to achieve your layout instead.
.layout {
display: flex
}
.contact-form {
flex: 1 1 auto;
background-color: rgb(243, 243, 243);
border-radius: 6px;
box-shadow: -4px 12px 11px 5px rgba(0, 0, 0, 0.521);
}
#help-me {
flex: 1 1 auto;
}
<div class="layout">
<div id="help-me">
#help-me
</div>
<div class="contact-form">
.contact-form
</div>
</div>
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.)
I'm trying to put those two buttons at the bottom but the vertical-align:bottom don't seem to have any effects.
Both blocks are in a class "login-card" and the blue stuff are buttons/submit inside this class.
Here is my css :
.login-card {
padding: 40px;
width: 400px;
height: auto;
background-color: #F7F7F7;
margin: 20px;
border-radius: 2px;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
overflow: hidden;
margin-left: auto;
margin-right: auto;
}
.login-card input[type=text], input[type=password], input[type=email], inputs {
height: 44px;
font-size: 16px;
width: 100%;
margin-bottom: 10px;
-webkit-appearance: none;
background: #fff;
border: 1px solid #d9d9d9;
border-top: 1px solid #c0c0c0;
padding: 0 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.login-card input[type=submit], input[type=button] {
width: 100%;
display: block;
margin-bottom: 10px;
position: relative;
display: table-cell;
vertical-align: bottom;
}
Am i missing something obvious ?
EDIT, added Html :
<div class="col-sm-6">
<div class="login-card" id="firstCard">
<h1>Fill the Wheel</h1>
<form action="javascript:void(0);" name="members" onsubmit="rollIt()">
<div id="dynamicInput">
<input class="inputs" type="text" name="input1" placeholder='Type name' required>
<input class="inputs" type="text" name="input2" placeholder='Type name' required>
<input class="inputs" type="text" name="input3" placeholder='Type name' required>
</div>
<input type="button" id="addInput" class="login login-submit" value="Add a member">
<input type="submit" id="rollWheel" name="login" class="login login-submit" value="Roll the wheel!">
</form>
</div>
</div>
Your buttons are at the bottom of the form, their parent. You need to take the padding-bottom off of login-card or something like that to give the buttons room to move down.
Also, here is an answer to your problem with the right box
<div class="wrapper">
<button></button>
<button></button>
</div>
.logincard:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: bottom;
}
.wrapper {
display: inline-block;
vertical-align: bottom;
}
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;
}