As you can see on the snippet, I've got spacing on the corners somehow. I need to remove spacing and make it look like a regular border. That's it
form {
width: 400px;
height: 50px;
display: flex;
flex-direction: row;
border: solid #D3D8E0 1px;
margin-bottom: 0px;
border-radius: 8px;
}
input[type="email"] {
flex-grow: 2;
margin: 0px;
padding: 0px;
width: 100%;
border: none;
}
input[type="submit"] {
height: 44px;
background: #0CB66E;
color: #fff;
font-size: 15px;
font-weight: 600;
border: none;
border-radius: 6px;
margin: 3px 3px 0 0;
}
input[type="email"]:focus {
outline: none;
}
<form id="form" action="https://www.freecodecamp.com/email-submit" method="GET">
<input id="email" type="email" placeholder="Email" required>
<input id="submit" type="submit" value="Get started">
</form>
You forgot to add a border-radius on your input type email.
form {
width: 400px;
height: 50px;
display: flex;
flex-direction: row;
border: solid #D3D8E0 1px;
margin-bottom: 0px;
border-radius: 8px;
}
input[type="email"] {
flex-grow: 2;
margin: 0px;
padding: 0px;
width: 100%;
border: none;
border-radius: 8px;
}
input[type="submit"] {
height: 44px;
background: #0CB66E;
color: #fff;
font-size: 15px;
font-weight: 600;
border: none;
border-radius: 6px;
margin: 3px 3px 0 0;
}
input[type="email"]:focus {
outline: none;
}
<form id="form" action="https://www.freecodecamp.com/email-submit" method="GET">
<input id="email" type="email" placeholder="Email" required>
<input id="submit" type="submit" value="Get started">
</form>
The input[type="email"] has a border-radius of 0 so cuts through it. Change it to this:
input[type="email"] {
flex-grow: 2;
margin: 0px;
padding: 0px;
width: 100%;
border: none;
border-radius: 6px;
}
input[type="email"] {
flex-grow: 2;
margin: 0px;
padding: 0px;
width: 100%;
border: none;
border-radius: 6px 0 0 6px;
}
Related
How do I adjust the text input position in the input box? I did do input[type=text] but it messes up my input box's position completely. I did change my ::placeholder left margin a little bit in case if you want to know.
HTML & CSS
.registerbox {
width: 500px;
height: 450px;
background: rgba(255, 255, 255, 0.7);
margin: 10px auto;
border-radius: 20px;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
color: white;
}
.inner-registerbox {
position: relative;
width: 100%;
height: 100%;
}
.registerbox-front {
position: absolute;
height: 100%;
width: 100%;
padding: 55px;
box-sizing: border-box;
border-radius: 14px;
}
input label {
display: block;
}
.registerbox h2 {
text-align: center;
font-size: 25px;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0;
color: black;
}
.input-box2 {
width: 95%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.input-box3 {
width: 105%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.registerbox-front ::placeholder {
padding-left: 10px;
}
.box-firstline, .box-secondline {
margin-top: 10px
}
<body>
<div class="registerbox">
<div class="inner-registerbox">
<div class="registerbox-front">
<h2>BORANG PENDAFTARAN MURID</h2>
<form>
<section>
<div class="box-firstline">
<div style="float:left;margin-right:25px;">
<label for="idmurid">ID Murid</label> <br />
<input type="text" name="idmurid" class="input-box2" placeholder="ID Murid" required>
</div>
<div style="float:left;">
<label for="namamurid">Nama Murid</label> <br />
<input type="text" name="namamurid" class="input-box3" placeholder="Nama Murid" required>
</div>
</div>
<br style="clear:both;" />
</section>
<div class="box-secondline">
<div style="float:left;margin-right:25px;">
<label for="namakelas">Nama Kelas</label> <br />
<input type="text" name="namakelas" class="input-box2" placeholder="Nama Kelas" required>
</div>
<div style="float:left;">
<label for="katalaluan_murid">Kata Laluan</label> <br />
<input type="password" name="katalaluan_murid" class="input-box3" placeholder="Katalaluan" required>
</div>
<br style="clear:both;" />
</div>
</div>
</div>
</body>
I took the code you posted, removed the ::placeholder padding and then added
input[type="text"] {
padding-left: 10px;
}
input[type="password"] {
padding-left: 10px;
}
And it adjusted the the text to match the placeholder.
Here is the full CSS:
.registerbox {
width: 500px;
height: 450px;
background: rgba(255, 255, 255, 0.7);
margin: 10px auto;
border-radius: 20px;
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.6);
color: white;
}
input[type="text"] {
padding-left: 10px;
}
input[type="password"] {
padding-left: 10px;
}
.inner-registerbox {
position: relative;
width: 100%;
height: 100%;
}
.registerbox-front {
position: absolute;
height: 100%;
width: 100%;
padding: 55px;
box-sizing: border-box;
border-radius: 14px;
}
input label {
display: block;
}
.registerbox h2 {
text-align: center;
font-size: 25px;
font-weight: normal;
margin-bottom: 20px;
margin-top: 0;
color: black;
}
.input-box2 {
width: 95%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.input-box3 {
width: 105%;
background: transparent;
border: 1px solid black;
height: 32px;
border-radius: 5px;
padding: 0 0px;
box-sizing: border-box;
outline: none;
text-align: left;
color: black;
display: table;
margin-top: 2px;
margin-bottom: 15px;
}
.box-firstline, .box-secondline {
margin-top: 10px;
}
I made this simple css design for my web form, and the problem is that on mobile or any small screen the input and the captcha escape from the frame yet the submit button is just fine... I don't know how to fix this and I have little experience in css.
Here's what it looks like on mobile:
and here's my code:
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: white;
}
form,
.dis {
width: 30%;
margin: 10px auto;
padding: 20px;
border: 3px solid #333333;
background: white;
border-radius: 5px 5px 10px 10px;
text-align: center;
}
input {
color: black;
padding: 5px;
width: auto;
border: 2px solid black;
border-radius: 10px 10px 10px 10px;
text-align: center;
background: white;
}
h2 {
width: 20%;
margin: 10px auto;
padding: 15px;
border: 2px solid red;
font-size: 75%;
color: red;
text-align: center;
}
<form id="dis" method="post">
<input name="username" type="username" placeholder="What's your Discord tag?" size="40"><br><br>
<input type="submit" name="submit" value="Submit"><br><br>
<center>
<div class="g-recaptcha" data-sitekey="6LfVs6sUAAAAAHi-Pm9QAKHNk_QskSE_-8F5zBrV"></div>
</center>
</form>
You can reset the value of your size attribute , or set a width to your input text. size="30" seems fine here , but to avoid side effects from font-size or family, i would advise to set also a max-width in your css.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text#size
The size attribute is a numeric value indicating how many characters wide the input field should be. The value must be a number greater than zero, and the default value is 20. Since character widths vary, this may or may not be exact and should not be relied upon to be so; the resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: white;
}
form,
.dis {
width: 30%;
margin: 10px auto;
padding: 20px;
border: 3px solid #333333;
background: white;
border-radius: 5px 5px 10px 10px;
text-align: center;
}
input {
color: black;
padding: 5px;
width: auto;
border: 2px solid black;
border-radius: 10px 10px 10px 10px;
text-align: center;
background: white;
max-width:90%;
}
h2 {
width: 20%;
margin: 10px auto;
padding: 15px;
border: 2px solid red;
font-size: 75%;
color: red;
text-align: center;
}
<form id="dis" method="post">
<input name="username" type="username" placeholder="What's your Discord tag?" size="30"><br><br>
<input type="submit" name="submit" value="Submit"><br><br>
<center>
<div class="g-recaptcha" data-sitekey="6LfVs6sUAAAAAHi-Pm9QAKHNk_QskSE_-8F5zBrV"></div>
</center>
</form>
The stylish rule you are missing on your css input is the max-width property :
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: white;
}
form,
.dis {
width: 30%;
margin: 10px auto;
padding: 20px;
border: 3px solid #333333;
background: white;
border-radius: 5px 5px 10px 10px;
text-align: center;
}
input {
color: black;
padding: 5px;
width: auto;
max-width: 95%;
border: 2px solid black;
border-radius: 10px 10px 10px 10px;
text-align: center;
background: white;
}
h2 {
width: 20%;
margin: 10px auto;
padding: 15px;
border: 2px solid red;
font-size: 75%;
color: red;
text-align: center;
}
<form id="dis" method="post">
<input name="username" type="username" placeholder="What's your Discord tag?" size="30"><br><br>
<input type="submit" name="submit" value="Submit"><br><br>
<center>
<div class="g-recaptcha" data-sitekey="6LfVs6sUAAAAAHi-Pm9QAKHNk_QskSE_-8F5zBrV"></div>
</center>
</form>
Try to use this, all I have done just adding box-sizing: border-box and width: 100% into input
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-size: 120%;
background: white;
}
#media only screen and (max-width: 999px) {
form,
.dis {
width: 30%;
margin: 10px auto;
padding: 20px;
border: 3px solid #333333;
background: white;
border-radius: 5px 5px 10px 10px;
text-align: center;
}
}
#media only screen and (min-width: 1000px) {
form,
.dis {
width: 300px;
margin: 10px auto;
padding: 20px;
border: 3px solid #333333;
background: white;
border-radius: 5px 5px 10px 10px;
text-align: center;
}
}
input {
color: black;
padding: 5px;
width: 100%;
border: 2px solid black;
border-radius: 10px 10px 10px 10px;
text-align: center;
background: white;
}
h2 {
width: 20%;
margin: 10px auto;
padding: 15px;
border: 2px solid red;
font-size: 75%;
color: red;
text-align: center;
}
<form id="dis" method="post">
<input name="username" type="username" placeholder="What's your Discord tag?" size="40"><br><br>
<input type="submit" name="submit" value="Submit"><br><br>
<center>
<div class="g-recaptcha" data-sitekey="6LfVs6sUAAAAAHi-Pm9QAKHNk_QskSE_-8F5zBrV"></div>
</center>
</form>
I am trying to have some pre-input on my forms and I want the input field to expand to the end of the container div. The problem is the input field seems to expand past the container div due to the length of the pre-input text.
.container {
width: 70%;
}
.input-field {
display: inline-block;
white-space: nowrap;
vertical-align: bottom;
background: #fff;
position: relative;
vertical-align: middle;
width: 100%;
min-width: 16px;
border: 1px solid #ddd;
}
.input-field .addon {
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding-left: 5px;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
width: 100%;
}
.input-field:hover {
border: 1px solid #05c9f0;
}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
Another example here: http://codepen.io/anon/pen/wgdErO
If you try the example code, you will note you can click the input box way outside where I want it to end.
Any thoughts on a fix?
Try using the flexbox layout.
.container {
width: 300px;
}
.input-field {
background: #fff;
border: 1px solid #ddd;
display: flex;
align-items: center;
}
.input-field .addon {
padding: 2px 8px;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding: 0 4px;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
flex: 1;
}
.input-field:hover {
border: 1px solid #05c9f0;
}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
<img src="//dummyimage.com/300x50">
Just decrease the input width from 100% to a lower value like 99.7% and that will do the trick:
.container {
width: 70%;
border: 1px solid red;
}
.input-field {
display: inline-block;
white-space: nowrap;
vertical-align: bottom;
background: #fff;
position: relative;
vertical-align: middle;
width: 99.7%;
min-width: 16px;
border: 1px solid #ddd;
}
.input-field .addon {
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;
text-align: center;
text-shadow: 0 1px 0 #fff;
background: #f0f0f0;
}
.input-field input {
padding-left: 5px;
padding-top: 0;
padding-bottom: 0;
margin: 0;
border: 0;
outline: none;
background: transparent;
resize: none;
width: 100%;
}
.input-field:hover {border: 1px solid #05c9f0;}
<div class="container">
<div class="input-field">
<span class="addon">some preinput</span>
<input id="" type="text" name="" value="test text" />
</div>
</div>
You can calculate the width like this! width: calc(100% - 125px); rather than set it to 100%
At first my input focus was working just fine, now all of a sudden when I add a couple of more styles to my input, it suddenly stops working. I've only added the 'input[type="text"] and border-radius and padding and some margins since when it was working. When you click each form element, nothing happens even though I have a rule for focus(which you can find near the bottom of the code). Is there any workaround for this?
form{
position: absolute;
left: 50%;
color: white;
margin-left: -180px;
padding: 15px 30px 15px 30px;
background-color: #26004d;
border-radius: 7px;
margin-top: 10px;
width: 300px;
}
label{
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
input:focus {
border: 2px solid #862d59;
}
input[type="submit"]{
width: 50%;
background-color: #862d59;
color: white;
margin-top: 5px;
padding: 12px 12px;
border: none;
cursor: pointer;
}
input[type="text"]{
width: 100%;
padding: 12px 12px;
margin: 4px 0;
border: 1px solid #ccc;
border-radius: 6px;
//box-sizing: border-box;
}
<div id="formholder1">
<form>
<div class="single-field">
<label for="Username">Username:</label>
<input name="Name" type="text"></input>
</div>
<div class="single-field">
<label for="Password">Password:</label>
<input name="Password" type="text"></input>
</div>
<input type="submit" value="Login">
</form>
</div>
Use this input[type="text"]:focus {
border: 2px solid #862d59;
}
learn it - http://www.w3schools.com/cssref/trysel.asp?selector=:focus
example - https://css-tricks.com/snippets/css/glowing-blue-input-highlights/
now its working
form{
position: absolute;
left: 50%;
color: white;
margin-left: -180px;
padding: 15px 30px 15px 30px;
background-color: #26004d;
border-radius: 7px;
margin-top: 10px;
width: 300px;
}
label{
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
input[type="text"]:focus {
border: 2px solid #862d59;
}
input:focus {
border: 2px solid red;
}
input[type="submit"]{
width: 50%;
background-color: #862d59;
color: white;
margin-top: 5px;
padding: 12px 12px;
border: none;
margin-left:-10px;
cursor: pointer;
}
input[type="text"]{
width: 100%;
padding: 12px 12px;
margin: 4px 0;
border: 1px solid #ccc;
border-radius: 6px;
margin-left:-15px;
//box-sizing: border-box;
}
<div id="formholder1">
<form>
<div class="single-field">
<label for="Username">Username:</label>
<input name="Name" type="text"></input>
</div>
<div class="single-field">
<label for="Password">Password:</label>
<input name="Password" type="text"></input>
</div>
<input type="submit" value="Login">
</form>
</div>
Put Your :focus property after input.
input[type="text"]:focus {
border: 5px solid #862d59;
}
form{
position: absolute;
left: 50%;
color: white;
margin-left: -180px;
padding: 15px 30px 15px 30px;
background-color: #26004d;
border-radius: 7px;
margin-top: 10px;
width: 300px;
}
label{
float: left;
text-align: right;
margin-right: 15px;
width: 100px;
}
input[type="submit"]{
width: 50%;
background-color: #862d59;
color: white;
margin-top: 5px;
padding: 12px 12px;
border: none;
cursor: pointer;
}
input[type="text"]{
width: 100%;
padding: 12px 12px;
margin: 4px 0;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
}
input[type="text"]:focus {
border: 5px solid #862d59;
}
<div id="formholder1">
<form>
<div class="single-field">
<label for="Username">Username:</label>
<input name="Name" type="text"></input>
</div>
<div class="single-field">
<label for="Password">Password:</label>
<input name="Password" type="text"></input>
</div>
<input type="submit" value="Login">
</form>
</div>
I have a contact form on this page: http://thehummingbirdplace.com/contact.html
The form's "comments" section has a large indent in the field when you click it to type. The indent can be deleted when typing, but I can't figure out how to get rid of it from the get go.
Here's the code for the form:
<div id="contactForm">
<form class="group" method="post" action="contact1.php">
<label for="text1">Name: </label>
<input name="name" type="text" id="text1" required>
<label for="text2">E-Mail: </label>
<input name="email" type="email" id="text2" required>
<label for="commentsfield" class="commentbox">Comments: </label>
<textarea name="comments" id="commentsfield"
cols=30 rows=9>
</textarea>
<input type="submit" value="submit"/>
</form>
</div>
Here's all the css I'm using on it:
#contactForm {
margin-left: auto;
margin-right: auto;
width: 520px;
height: 500px;
}
form {
padding-right: 15px;
padding-bottom: 0px;
padding-left: 15px;
position: absolute;
z-index: 1;
}
label {
display: block;
width: 270px;
padding-top: 15px;
margin-top: 0;
margin-bottom: 0;
margin-left: 15px;
}
label.commentbox {
width: 501px;
}
form * {
background: transparent;
behavior: url(../_assets/PIE.htc);
}
input {
-webkit-appearance: none;
-moz-appearance: none;
border: none;
background: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
padding: 0;
margin: 0;
}
.group:before, .group:after {
content: "\0020";
display: block;
height: 0;
overflow; hidden;
}
.group:after {
clear: both;
}
.group {
zoom: 1;
}
input[type=text], input[type=email] {
width: 270px;
}
textarea {
width: 500px;
}
input[type=text], input[type=email] {
padding: 5px;
}
input[type=text], input[type=email], textarea {
display: block;
border: 1px solid #EAEAEA;
font-size: 16px;
background-color: #fff;
color: #666;
box-shadow: 0px 2px 3px rgba(255,255,255,0.5);
}
input:focus, textarea:focus {
}
input[type=email] {
padding-right: 10px;
}
input[type=submit] {
padding: 5px;
background: #666;
color: white;
border: none;
margin-top: 15px;
font-size: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
input[type=text].required {
padding-left: 10px;
}
input.required {
background: webkit-linear-gradient(#FFF, #DDD);
background: moz-linear-gradient(#FFF, #DDD);
background: ms-linear-gradient(#FFF, #DDD);
background: o-linear-gradient(#FFF, #DDD);
background: linear-gradient(#FFF, #DDD);
-pie-background: linear-gradient(#FFF, #DDD);
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
I haven't seen this happen before, and nothing stands out to me as causing the intent in the form. Any help would be greatly appreciated!
You need to get rid of the white space between your textarea tag
<textarea name="comments" id="commentsfield" cols=30 rows=9></textarea>
Buggy Demo
Fixed Demo
You have a big gap between your <textarea> </textarea>
Replace this:-
<textarea name="comments" id="commentsfield" cols="30" rows="9"> </textarea>
With this one :-
<textarea name="comments" id="commentsfield" cols="30" rows="9"></textarea>