I used bootstrap but placeholder is not in center align
<input id="findNearestClinicText" type="text" placeholder="ENTER YOUR ZIP CODE">
Inputbox font size is : 20px
Placeholder font size is: 14px
my client doesn't want to change the font size of the input box and placeholder. but if I set it with the same font size then it aligned center.
I want the placeholder to be aligned the center of the text box with a different font size of textbox and placeholder. Please help.
use ::placeholder class in css
css
#findNearestClinicText{
width: 400px;
font-size: 20px;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
text-align:center;
font-size: 14px;
}
::-moz-placeholder { /* Firefox 19+ */
text-align:center;
font-size: 14px;
}
:-ms-input-placeholder { /* IE 10+ */
text-align:center;
font-size: 14px;
}
:-moz-placeholder { /* Firefox 18- */
text-align:center;
font-size: 14px;
}
Please check this link https://jsfiddle.net/xunbfvvh/
using Padding In css
Method-1 : using id
#findNearestClinicText
{
padding:10px;
font-size:20px;/* Inputbox font size*/
}
/* Placeholder font size is: 14px */
#findNearestClinicText::-webkit-input-placeholder {
font-size: 14px;
}
#findNearestClinicText::-moz-placeholder {
font-size: 14px;
}
#findNearestClinicText::-ms-input-placeholder {
font-size: 14px;
}
#findNearestClinicText::-moz-placeholder {
font-size: 14px;
}
<input id="findNearestClinicText" type="text" placeholder="ENTER YOUR ZIP CODE">
Method-2 : Using Attribute
input[type='text']
{
padding:10px;
font-size:20px;/* Inputbox font size*/
}
/* Placeholder font size is: 14px */
input[type='text']::-webkit-input-placeholder {
font-size: 14px;
}
input[type='text']::-moz-placeholder {
font-size: 14px;
}
input[type='text']::-ms-input-placeholder {
font-size: 14px;
}
input[type='text']::-moz-placeholder {
font-size: 14px;
}
<input id="findNearestClinicText" type="text" placeholder="ENTER YOUR ZIP CODE">
I am using below mentions css to show cutom radio buttons
input[type=radio]{
display:none;
}
.radio-options label::before {
content: "\2b24";
color:#e2e2e2;
display: inline-block !important;
width: 17px;
height: 17px;
vertical-align:middle;
margin-right: 8px;
background-color: #fff;
border: 1px solid #e2e2e2;
border-radius: 8px;
font-size: 9px;
text-align: center;
text-shadow: 0px 0px 3px #fff;
font-family: monospace;
padding-top: 1.8px;
line-height: 10px;
cursor: pointer;
}
.radio-options label.active-radio::before {
content: "\2b24";
color: #f9b410;
background-color: #fff;
font-size: 9px;
text-align: center;
text-shadow: 0px 0px 3px #fff;
font-family: monospace;
margin-left: 0px;
padding-top: 1.8px;
line-height: 10px;
}
<div class="radio-options">
<div class="col-md-6 col-xs-6">
<input id="some_thing" type="radio" >
<label ng-class="{'active-radio':true}">Something</label >
</div>
</div>
In desktop browser it's working correctly and showing radio button as
But in safari iOs its not displaying anything
Any suggestions what could be possible cause ?
It is because of the Unicode symbol you use as a content. It doesn't seem to appear on iOS. If you change to "Black Circle" instead it will work. (Just increase the font-size to compensate the size.)
Unicode Black Circle symbol
Similar issue
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">
I am having difficulty with IE 9 and Opera Browsers only for the alignment of a star.
I am using the following HTML:
<div class="fullwidth">
<div class="floatleft star">★</div>
<h3 class="icontxt">Co-Hosts</h3>
</div>
The Following CSS:
.floatleft
{
float: left;
}
.fullwidth
{
width: 100%;
}
h3
{
margin: 0;
text-align: left;
font-family: "GearedSlab-Regular", "Geared Slab Regular", "geared_slabregular";
text-transform: uppercase;
color: #212D3B;
letter-spacing: .1em;
font-size: 1.5em;
line-height: 1.7em;
}
h3.icontxt
{
padding-left: 1.5em;
}
.star
{
font-size: 1.4em !important;
color: #A92A23;
}
Ok, so Chrome, Firefox, and Safari render it like so (the way I need it in all browsers to be):
However, if you look at this in IE 9, and/or Opera, it looks like this:
The Star is too high, it needs to be in line with the text: "CO-HOSTS"
Am I doing something wrong here? How can this be done for IE, Chrome, Opera, Safari, and Firefox universally? This is just so frustrating!
How about this:
.floatleft
{
float: left;
}
.fullwidth
{
width: 100%;
}
h3
{
margin: 0;
text-align: left;
font-family: "GearedSlab-Regular", "Geared Slab Regular", "geared_slabregular";
text-transform: uppercase;
color: #212D3B;
letter-spacing: .1em;
font-size: 1.5em;
line-height: 1.7em;
}
h3.icontxt
{
padding-left: 1.5em;
}
.star
{
line-height: 1.7em;
font-size: 1.4em !important;
color: #A92A23;
}
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>