When the placeholder's font-size is different to input font-size, the placeholder is misaligned vertically in Chrome (in Firefox it works fine).
Screenshot:
Here is the HTML / CSS:
body {
padding: 20px;
}
input {
padding: 0 10px;
color: green;
font-size: 30px;
height: 57px
}
input::-webkit-input-placeholder {
color: blue;
font-size: 14px;
line-height: 57px;
}
input::-moz-placeholder {
color: blue;
font-size: 14px;
}
<input type="text" value="" placeholder="Placeholder text">
Also available as a jsFiddle.
This seems like buggy behaviour by Chrome, the placeholder is aligned vertically with the baseline of the larger font size in the input.
In order to correctly vertically center the smaller placeholder text in Chrome, you can use position: relative and top: -5px as a workaround.
Workaround
body {
padding: 20px;
}
input {
padding: 0 10px;
color: green;
font-size: 30px;
height: 57px;
}
input::-webkit-input-placeholder {
color: blue;
font-size: 14px;
position: relative;
top: -5px;
}
input::-moz-placeholder {
color: blue;
font-size: 14px;
}
<input type="text" value="" placeholder="Placeholder text">
Related
QUESTION 1:
Why do the following textarea and text input have different vertical text alignment if they both have the same font-size, line-height, height, padding ?
QUESTION 1.1
How can I make the textarea have the same vertical alignment as the input ?
.myTextarea {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 21px;
height: 32px;
padding: 2px 5px;
resize: none;
}
.myInput {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 21px;
height: 32px;
padding: 2px 5px;
}
.myDiv {
margin-top: 20px;
margin-bottom: 5px;
font-weight: bold;
}
<div>
<div class="myDiv">Textarea</div>
<textarea class="myTextarea" rows="1">12345</textarea>
<div class="myDiv">Input</div>
<input class="myInput" type="text" value="12345"/>
</div>
Textareas are for multiline texts while inputs are made for single line.
That's why line height won't have effect on input as it's considered to be equal to the input's height.
You can remove line height on your input since it has no effect on it.
Beside you should have the same line height as height for your textarea to reproduce the same effect than the input.
.myTextarea {
display: block;
font-family: Arial;
font-size: 14px;
line-height: 32px;
height: 32px;
padding: 2px 5px;
resize: none;
}
.myInput {
display: block;
font-family: Arial;
font-size: 14px;
height: 32px;
padding: 2px 5px;
}
.myDiv {
margin-top: 20px;
margin-bottom: 5px;
font-weight: bold;
}
<div>
<div class="myDiv">Textarea</div>
<textarea class="myTextarea" rows="1">12345</textarea>
<div class="myDiv">Input</div>
<input class="myInput" type="text" value="12345"/>
</div>
I am trying to see how the page looks like on a 1366x768 laptop.
In Inspect device it looks perfectly fine:
But on the actual laptop, it looks like this:
So way off! :-/ It is very frustrating as I work on a big screen, and I cannot check it on the small laptop screen every minute.
How comes the page fits perfectly fine in the 1366x768's chrome device inspect but horribly on the actual 1366x768 screen?
Any tip what may be going on?
CSS:
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
}
/* Control the right side */
.right {
right: 0;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
color:black;
max-width: 560px;
min-width: 500px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border-color: #eee;
border-width: 1px;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}
.Forgot-Password {
font-family: "Roboto";
font-size: 17px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
margin-top:15px;
text-align: center;
color: #555556;
}
.form button {
font-family: "Roboto", sans-serif;
outline: 0;
background:#009bf7;
width: 100%;
border: 0;
padding: 15px;
font-size: 17px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
color:white;
}
.form button:hover,.form button:active,.form button:focus {
background:#0c6ea7
}
.form button:disabled {
background: #dddddd;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #4CAF50;
text-decoration: none;
}
.form .register-form {
display: none;
}
The HTML markup:
<div class="split left">
<div class="centered">
<div style="margin-bottom:60px">
<img class="img-responsive" src="images/fineon.png" alt="Fineon"> </div>
<style>
.navbar {
display: none;
}
.navbar-primary {
display: none;
}
</style>
<div ng-controller="login-controller" ng-init="initLoginPage()">
<div align="center">{{message}}</div>
<form class="login-form form">
<p class="form-login-title" dir="{{pageInfo.direction}}">{{gs("signIn", "Sign in")}}</p>
<hr style="margin-right:370px;border: 1px solid black;" width="15%">
<div class="form-field">
<input dir="{{pageInfo.direction}}" type="text" name="first_name" id="first_name" required ng-model="user.email">
<label for="first_name">{{gs("emailAddress", "Email Address")}}</label>
</div>
<div class="form-field">
<input dir="{{pageInfo.direction}}" type="text" name="first_name" id="first_name" required ng-model="user.password">
<label for="first_name">{{gs("password", "Password")}}</label>
</div>
<button ng-disabled="crisperSessionId == undefined" dir="{{pageInfo.direction}}" ng-click="login()"
type="submit">{{gs("signInButton", "Sign in")}}</button>
<p class="Forgot-Password"><a class="Forgot-Password" href="#/loginForgot">Forgot my password</a></p>
</form>
</div>
</div>
<div class="split right ">
<div class="centered">
<h4 class="Fineon-Exchange">Fineon</h4> <br>
<p class="Export-Receivable-Finance-Marketplace" >Trade Finance & Marketplace</p>
<div style="width:70px; margin-top:50px">
<hr style="border: 1px solid white;">
</div>
</div>
</div>
</div>
Although I am not a hard core programer or any expert, but I think I know what might be wrong. The Inspect Element of your browser shows your page in a 1366x768 resolution. Whereas on the laptop, you are actually viewing the page in 1366-(top and bottom toolbars pixels) x 768-(scroll bar width pixels) resolution. So, the laptop has resolution of 1366x768 but actual displayable resolution is lesser than that and, in my opinion, is the problem.
Now you can either get the actual displayable resolution from the laptop and set as custom resolution in your chrome inspect tool or press f11 on your laptop to see the page in actual 1366x768 resolution.
I want to keep dollar symbol at beginning of text box. I am able to achieve this using the below code.
It works find in chrome and IE. The dollar symbol goes and sits next to label in firefox. How do i fix this problem? And for aligning the dollar symbol inline with text i use top 2px. Is there a way to better the css code.
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
left: 10px;
position: absolute;
top: 2px;
}
.input-symbol-dollar {
position: relative;
}
.abc-input {
border: 2px solid #c9c9c9;
box-shadow: none;
color: #6b6f72;
font-size: 0.9375rem;
text-transform: none;
width: 100%;
color: #37424a !important;
font-family: "Roboto Regular", sans-serif;
font-size: 16px !important;
font-weight: 400;
height: 42px !important;
padding-left: 17px !important;
display: inline-block !important;
}
label {
color: #37424a;
display: inline-block;
font-family: "Roboto Bold", sans-serif;
font-size: 15px;
font-weight: 700;
margin-bottom: 8px;
}
<label for="abcInput" class="abc-label">lable filed </label>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.00"></span>
https://jsfiddle.net/8jdek3zt/5/
It looks like there's a lot of unnecessary code in your example.
Here's a simplified version that works on Chrome, Firefox and IE (not tested in Safari).
span {
display: inline-block;
position: relative;
}
input {
border: 2px solid #c9c9c9;
box-shadow: none;
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
height: 42px;
padding-left: 20px;
}
span::before {
content: "$";
font-family: "Roboto Regular", sans-serif;
font-size: 1.5em;
position: absolute;
left: 5px;
top: 50%;
transform: translateY(-50%);
}
<span>
<input placeholder="0.00">
</span>
Here's an explanation of the vertical centering method for the pseudo-element:
Element will not stay centered, especially when re-sizing screen
The reason why this is happening is because the span is an inline element, so it's positioning isn't calculated as you are expecting it to be. The easiest solution would be to set display: block on the <span class="input-symbol-dollar">
As for positioning it in a cleaner way, you could consider making the symbol display block as well, with a height 100% of the input and set the line-height equal to the input height. I've updated your fiddle but the relevant code is below:
https://jsfiddle.net/chzk1qgm/1/
.input-symbol-dollar {
position: relative;
display: block;
}
.input-symbol-dollar:after {
color: #37424a !important;
content: "$";
font-size: 16px !important;
font-weight: 400;
position: absolute;
display: block;
height: 100%;
top: 0;
left: 10px;
line-height: 46px; // height of input + 4px for input border
}
Alternatively, you could just change the span to a div, as a div is a block level element by default. The rest of the styles would remain the same though.
try putting span in div.
<label for="abcInput" class="abc-label">lable filed </label>
<div>
<span class="input-symbol-dollar">
<input type="text" id="abcInput" tabindex="0" name="abc" class="abc-input " placeholder="0.000">
</span>
</div>
.custom-text{
border: 2px solid #DDD;
width: 100%;
padding: 5px;
}
<div class="custom-text">
<span>$</span>
<input style="border: none;"/>
</div>
What I want
Chrome
On Chrome, the input text looks normal.
What is happening
Firefox
Safari
As you can see, the input text is being slightly cut off at the bottom on Firefox and majorly cut off on Safari. How can I fix that?
If anyone could help w/ this it would be greatly appreciated!
Code
HTML
<div class="row page-header">
<div class="col-xs-10">
<div class="form-group">
<input type="text" name="Worksheet-Name" class="form-control input-lg" placeholder="Worksheet Name..." aria-label="Write worksheet name here"> </div>
</div>
</div>
CSS
/*Add borders when hover or click on input boxes*/
input[type="text"] {
outline: none;
box-shadow:none !important;
border: 1px solid white; /*make the borders invisble by turning same color as background*/
}
input[type="text"]:hover, input[type="text"]:focus{
border: 1px solid #cccccc;
border-radius: 8px;
}
/*Style input text boxes*/
input[type='text'][name='Worksheet-Name']{
font-size: 36px;
margin-top: 20px;
margin-left: 15px;
}
input[type='text'][name='Worksheet-Problem']{
font-size: 20px;
}
/*Change placeholder*/
input[type='text'][name='Worksheet-Name']::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-weight: 500;
font-size: 36px;
}
input[type='text'][name='Worksheet-Name']::-moz-placeholder { /* Firefox 19+ */
font-weight: 500;
font-size: 36px;
}
input[type='text'][name='Worksheet-Name']:-ms-input-placeholder { /* IE 10+ */
font-weight: 500;
font-size: 36px;
}
input[type='text'][name='Worksheet-Name']:-moz-placeholder { /* Firefox 18- */
font-weight: 500;
font-size: 36px;
}
/*Change placeholder*/
input[type='text'][name='Worksheet-Problem']::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-weight: 400;
font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']::-moz-placeholder { /* Firefox 19+ */
font-weight: 400;
font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']:-ms-input-placeholder { /* IE 10+ */
font-weight: 400;
font-size: 20px;
}
input[type='text'][name='Worksheet-Problem']:-moz-placeholder { /* Firefox 18- */
font-weight: 400;
font-size: 20px;
}
JSFiddle
Guys sometimes proposed solutions don't work with placeholders, here is more powerful approach:
input::placeholder {
overflow: visible;
}
You can reduce the bottom padding and/or the font size and that will fix your overflow issue.
input[type='text'][name='Worksheet-Name']{
font-size: 35px;//instead of 36
margin-top: 20px;
margin-left: 15px;
}
or
.input-lg {
height: 46px;
padding: 10px 16px 0;//change here to have 0
font-size: 18px;
line-height: 1.33333;
border-radius: 6px;
}
also possibly answered here with line-height:
Why is Firefox cutting off the text in my <input type="text"/>?
Fixed this with line-height:1 on the input
The cause is placing the line-height on the placeholder, if you remove that then it will no longer be cut
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
The community is reviewing whether to reopen this question as of 3 days ago.
Improve this question
How do I visually place a button inside an input element as shown below?
The user should be able to interact with the input as normal. The text shouldn't go behind the button, even when it's long. Focus should work correctly. The form should be accessible and work correctly in screen readers. The whole component should be styleable with CSS, and should be able to easily resize to fit the space available.
How do I accomplish this with modern CSS?
The button isn't inside the input. Here:
input[type="text"] {
width: 200px;
height: 20px;
padding-right: 50px;
}
input[type="submit"] {
margin-left: -50px;
height: 20px;
width: 50px;
}
Example: http://jsfiddle.net/s5GVh/
Use a Flexbox, and put the border on the form.
The best way to do this now (2022) is with a flexbox.
Put the border on the containing element (in this case I've used the form, but you could use a div).
Use a flexbox layout to arrange the input and the button side by side. Allow the input to stretch to take up all available space.
Now hide the input by removing its border.
Run the snippet below to see what you get.
form {
/* This bit sets up the horizontal layout */
display:flex;
flex-direction:row;
/* This bit draws the box around it */
border:1px solid grey;
/* I've used padding so you can see the edges of the elements. */
padding:1px;
}
input {
/* Tell the input to use all the available space */
flex-grow:2;
/* And hide the input's outline, so the form looks like the outline */
border:none;
}
/* remove the input focus blue box, it will be in the wrong place. */
input:focus {
outline: none;
}
/* Add the focus effect to the form so it contains the button */
form:focus-within {
outline: 1px solid blue
}
button {
/* Just a little styling to make it pretty */
border:1px solid blue;
background:blue;
color:white;
}
<form>
<input />
<button>Go</button>
</form>
Why this is good
It will stretch to any width.
The button will always be just as big as it needs to be. It won't stretch if the screen is wide, or shrink if the screen is narrow.
The input text will not go behind the button.
Caveats and Browser Support
There's limited Flexbox support in IE9, so the button will not be on the right of the form. IE9 has not been supported by Microsoft for some years now, so I'm personally quite comfortable with this.
I've used minimal styling here. I've left in the padding to show the edges of things. You can obviously make this look however you want it to look with rounded corners, drop shadows, etc..
.flexContainer {
display: flex;
}
.inputField {
flex: 1;
}
<div class="flexContainer">
<input type="password" class="inputField">
<button type="submit"><img src="arrow.png" alt="Arrow Icon"></button>
</div>
I found a great code for you:
HTML
<form class="form-wrapper cf">
<input type="text" placeholder="Search here..." required>
<button type="submit">Search</button>
</form>
CSS
/*Clearing Floats*/
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
/* Form wrapper styling */
.form-wrapper {
width: 450px;
padding: 15px;
margin: 150px auto 50px auto;
background: #444;
background: rgba(0,0,0,.2);
border-radius: 10px;
box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}
/* Form text input */
.form-wrapper input {
width: 330px;
height: 20px;
padding: 10px 5px;
float: left;
font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
border: 0;
background: #eee;
border-radius: 3px 0 0 3px;
}
.form-wrapper input:focus {
outline: 0;
background: #fff;
box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}
.form-wrapper input::-webkit-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-moz-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
.form-wrapper input:-ms-input-placeholder {
color: #999;
font-weight: normal;
font-style: italic;
}
/* Form submit button */
.form-wrapper button {
overflow: visible;
position: relative;
float: right;
border: 0;
padding: 0;
cursor: pointer;
height: 40px;
width: 110px;
font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
color: #fff;
text-transform: uppercase;
background: #d83c3c;
border-radius: 0 3px 3px 0;
text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}
.form-wrapper button:hover {
background: #e54040;
}
.form-wrapper button:active,
.form-wrapper button:focus {
background: #c42f2f;
outline: 0;
}
.form-wrapper button:before { /* left arrow */
content: '';
position: absolute;
border-width: 8px 8px 8px 0;
border-style: solid solid solid none;
border-color: transparent #d83c3c transparent;
top: 12px;
left: -6px;
}
.form-wrapper button:hover:before {
border-right-color: #e54040;
}
.form-wrapper button:focus:before,
.form-wrapper button:active:before {
border-right-color: #c42f2f;
}
.form-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */
border: 0;
padding: 0;
}
Demo: On fiddle
Source: Speckyboy
This is the cleanest way to do in bootstrap v3.
<div class="form-group">
<div class="input-group">
<input type="text" name="search" class="form-control" placeholder="Search">
<span><button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button></span>
</div>
</div>
This can be achieved using inline-block
JS fiddle here
<html>
<body class="body">
<div class="form">
<form class="email-form">
<input type="text" class="input">
Button
</form>
</div>
</body>
</html>
<style>
* {
box-sizing: border-box;
}
.body {
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333;
}
.form {
display: block;
margin: 0 0 15px;
}
.email-form {
display: block;
margin-top: 20px;
margin-left: 20px;
}
.button {
height: 40px;
display: inline-block;
padding: 9px 15px;
background-color: grey;
color: white;
border: 0;
line-height: inherit;
text-decoration: none;
cursor: pointer;
}
.input {
display: inline-block;
width: 200px;
height: 40px;
margin-bottom: 0px;
padding: 9px 12px;
color: #333333;
vertical-align: middle;
background-color: #ffffff;
border: 1px solid #cccccc;
margin: 0;
line-height: 1.42857143;
}
</style>