im trying to use input in label element but it get focus out of its border (in left and right side).
What is my code problem?
label {
display: block;
padding-top: 30px;
text-align: center;
}
label input
{
background-color: transparent;
font-size: 36px;
outline: 0;
text-align: center;
}
#comment
{
width: 75%;
height: auto;
margin: 0 auto;
border-radius: 10px;
background: #d9d9d9;
margin-bottom: 30px;
border: 6px lightblue solid;
}
#name
{
width: 35%;
border: 2px solid #ff5126;
}
#email
{
width: 50%;
border: 2px solid #ff5126;
margin-bottom: 30px;
}
<div id="comment">
<label>
<input placeholder="Name" type="text" id="name" required/>
</label>
<label>
<input placeholder="E-mail" type="email" id="email" required/>
</label>
</div>
The point of the label element (aside from associating some text — which is missing from your code — with the input) is that clicking on the label will focus the input.
Your labels are display: block, so they will fill the width of the container.
Add a background colour, border, outline, etc to see where it is.
Related
This question already has answers here:
How to make an element width: 100% minus padding?
(15 answers)
Closed 3 years ago.
I'm trying to edit the form text padding without changing the form size (to match the placeholder). Every time I change the padding it adds the form's length.
.form-wrapper {
display:flex;
justify-content: center;
flex-direction: column;
margin: 1em 6em;
}
form {
width:100%;
margin: 1em 0;
}
.email-input input{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom: none;
}
.password-input input{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input {
width:100%;
height: 50px;
border:solid 1px #ccc;
font-size:18px;
}
input::placeholder {
color: #ccc;
font-size:18px;
padding-left:25px;
}
<form>
<div className="input-field email-input">
<input id="email" type="text" className="validate" placeholder="Enter Your Email Adress"/>
</div>
<div className="input-field password-input">
<input id="password" type="text" className="validate" placeholder="Enter Your Password"/>
</div>
</form>
Adding something as :
input {
padding-left: 25px;
}
Increases the form length which is undesirable. Is this something I have to end up hacking through to make work?
You may want to use CCS box-sizing
That will include the border and padding to the elements width
* {
box-sizing: border-box;
}
be careful with the * you can also add box-sizing: border-box; to only the elements needed.
Add *{box-sizing: border-box;} for global css it will not increase the padding outside the
An alternative to box-sizing: border-box; might be toe substract the padding from width, something like this:
.form-wrapper {
display: flex;
justify-content: center;
flex-direction: column;
margin: 1em 6em;
}
form {
width: 100%;
margin: 1em 0;
}
.email-input input {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom: none;
}
.password-input input {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input {
width: calc(100% - 25px);
height: 50px;
border: solid 1px #ccc;
font-size: 18px;
padding-left: 25px;
}
input::placeholder {
color: #ccc;
font-size: 18px;
padding-left: 25px;
}
<form>
<div className="input-field email-input">
<input id="email" type="text" className="validate" placeholder="Enter Your Email Adress" />
</div>
<div className="input-field password-input">
<input id="password" type="text" className="validate" placeholder="Enter Your Password" />
</div>
</form>
I have a project to create a website designed in PhotoShop. I want to create a to textbox in HTML and CSS which looks like this:
As you can see, there is no problem with the background or fonts; the problem is the textbox. How can I create textboxes with these curves?
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
div {
background: #444;
direction: rtl;
width: 300px;
padding: 20px;
}
label {
width: 100%;
color: #fff
}
input {
border-radius: 0 2em;
padding: 0 10px;
width: 100%;
border: none;
line-height: 2em;
margin-bottom: 20px;
}
textarea {
border-radius: 0 4em;
padding: 0 10px;
width: 100%;
border: none;
line-height: 2em;
margin-bottom: 20px;
}
input[type="submit"] {
max-width: 100px;
}
<div class="wrapper">
<label>Name</label>
<input type="text" />
<label>Email</label>
<input type="text" />
<label>Message</label>
<textarea></textarea>
<input type="submit" value="Submit" />
</div>
This is how to get the shape in your image. You will need to learn a bit about border-radius.
The following is an example:
div#test {
border: thin solid #666;
width: 8em;
height: 2em;
border-radius: 0 2em 0 2em;
}
<div id="test"> </div>
The border-radius property is responsible for rounding corners. It can be very sophisticated, but the simple one here will do the job. You will just need to adjust some of the values.
The four values in the border-radius property represent the radius of the individual borders, clockwise from the top-left corner.
I coded this simple CSS-trick to show when you click on the input (:focus) a tooltip will give you some information about the input. Everything is working but, the tooltip it's displayed below the input and not over. Actually I know that I can use margin to fix it, but I'm asking if there's a "more" clean way that when you use position absolute in this way, it will automatically align the tooltip over the input.
HTML:
<div>
<input type="text" placeholder="Username">
<span class="input_info">Info1</span>
</div>
<div>
<input type="text" placeholder="Password">
<span class="input_info">Info2</span>
</div>
CSS
.input_info {
display: none;
position: absolute;
background: #000;
border: 1px solid #fff;
color: #fff;
width: 100px;
margin-left: 80px;
}
input[type="text"]:focus + .input_info {
display: block;
}
https://jsfiddle.net/xzqsaobu/
You need to change display: block to display: inline-block, remove the margin-left and position: absolute;.
Your fiddle updated.
Snippet:
.input_info {
background: #000;
border: 1px solid #fff;
color: #fff;
width: 100px;
display: none;
}
input[type="text"]:focus + .input_info {
display: inline-block;
}
<div>
<input type="text" placeholder="Username">
<span class="input_info">Info1</span>
</div>
<div>
<input type="text" placeholder="Password">
<span class="input_info">Info2</span>
</div>
Here is how to do it with position: absolute and relative.
On the container, set position: relative, and display: table (shrink to fit).
For the position: absolute tooltip, set top: 0, and left: 100% (moves to the right edge of the relative container).
You can also horizonally center the fields in a page with this approach.
jsFiddle
.fieldset {
position: relative;
display: table;
/* margin: auto; */
}
.input_info {
position: absolute;
left: 100%;
top: 0;
background: #000;
border: 1px solid #fff;
color: #fff;
width: 100px;
display: none;
}
input[type="text"]:focus + .input_info {
display: block;
}
<div class="fieldset">
<input type="text" placeholder="Username">
<span class="input_info">Info1</span>
</div>
<div class="fieldset">
<input type="text" placeholder="Password">
<span class="input_info">Info2</span>
</div>
I have a fieldset, how can I position the legend inside a fieldset with a border? I want the border to go around the legend and not through the middle of it.
JSFiddle
fieldset {
border: 0;
padding: 0!important;
margin: 0;
min-width: 0;
border: 1px solid red;
}
legend {
padding: 0!important;
}
<fieldset>
<legend>Title</legend>
</fieldset>
One option would be to float the legend element to the left:
fieldset {
border: 2px solid #f00;
}
legend {
float: left;
width: 100%;
padding: 0;
font-weight: bold;
}
<fieldset>
<legend>This is a legend</legend>
<label>Here is an input element: <input type="text" /></label>
</fieldset>
Another approach would be to use an outline rather than a border:
fieldset {
border: none;
outline: 2px solid #f00;
}
legend {
padding: 0.6em 0 0;
font-weight: bold;
}
<fieldset>
<legend>This is a legend</legend>
<label>Here is an input element: <input type="text" /></label>
</fieldset>
Another approach would be to absolutely position the legend element relative to the parent fieldset element. This is probably the least flexible approach.
fieldset {
border: 2px solid #f00;
position: relative;
padding-top: 2.6em; /* Displace the absolutely positioned legend */
}
legend {
position: absolute;
top: 0; left: 0;
padding: 12px;
font-weight: bold;
}
<fieldset>
<legend>This is a legend</legend>
<label>Here is an input element: <input type="text" /></label>
</fieldset>
A variation on the accepted answer (using SASS) which should work in all modern browsers (IE9+)
fieldset {
> legend {
float: left;
+ * {
clear: both;
}
}
}
This will clear the next element after the float so you don't have to worry about your layout being messed up.
I have the following form that I want to customize.
<form>
<input type="text" value="" />
<button></button>
</form>
I want the button to have a background image and no text.
The problem is that the button loses its vertical alignment when I don't write any text into it.
Can someone explain this behaviour?
input {
width: 200px;
height: 20px;
border: 1px solid #0066cc;
border-radius: 20px;
padding: 0;
}
button {
margin-left: -30px;
background-color: white;
background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
background-repeat: no-repeat;
background-position: center center;
border: none;
width: 19px;
height: 19px;
padding: 0;
}
<form>
<input type="text" value="" />
<button></button>
</form>
<form>
<input type="text" value="" />
<button>Some text</button>
</form>
Because they have a default vertical-align property of baseline, which alignes inline elements according to the bottom of the element's content (the text).
If there is no content, the vertical alignment cannot be based upon it, instead it is based on the bottom of the element.
You can fix this with a non-breaking space, or by changing the vertical alignment.
<form>
<input type="text" value="" />
<button> </button>
</form>
JSFiddle
-- Or --
button {
margin-left: -30px;
background-color: white;
background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
background-repeat: no-repeat;
background-position: center center;
border: none;
width: 19px;
height: 19px;
padding: 0;
vertical-align:middle;
}
JSFiddle
A good read:
All you need to know about vertical-align - Christopher Aue
If you add the vertical-align indicator to the button it should help it move to the position you want, it will need a little bit of extra margin just to push it up a bit though.
Try this out:
input {
width: 200px;
height: 20px;
border: 1px solid #0066cc;
border-radius: 20px;
padding: 0;
}
button {
margin-left: -31px;
background-color: white;
background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
background-repeat: no-repeat;
background-position: center center;
border: none;
width: 19px;
height: 19px;
padding: 0;
vertical-align: bottom;
margin-bottom: 1px;
}
<form>
<input type="text" value="" />
<button></button>
</form>
This seems to be a matter of vertical alignment because the elements are inline-(block?)
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
input {
width: 200px;
height: 20px;
border: 1px solid #0066cc;
border-radius: 20px;
vertical-align: top;
}
button {
background-color: white;
background-image: url("http://s18.postimg.org/k6rruvokl/loupe_recherche.gif");
background-repeat: no-repeat;
background-position: center center;
border: none;
width: 20px;
height: 20px;
border: 1px solid red;
vertical-align: top;
}
<form>
<input type="text" value="" />
<button></button>
</form>