I have a problem with styling first letter of placeholder. I want to achieve that the first letter was Arial. I have this code in scss
input[type=text] {
font-family: MyriadPro;
font-size: 18px;
color: #fff;
background-color: black;
margin-bottom: 55px;
&::-webkit-input-placeholder: : first-letter {
font-family: 'Font Awesome';
padding-right: 10px;
}
&:-moz-placeholder::first-letter {
font-family: 'Font Awesome';
padding-right: 10px;
}
&::-moz-placeholder::first-letter {
font-family: 'Font Awesome';
padding-right: 10px;
}
&:-ms-input-placeholder::first-letter {
font-family: 'Font Awesome';
padding-right: 10px;
}
}
<input type="text" placeholder=" zadejte Vás email">
It works in Chrome and Opera. But in Firefox it doesn't affect first letter. Is this a bug of explorer? Is there a way to achieve it?
Related
I have an input and h4 element. I'm using the same font and font size but they do not look the same.
#font-face {
font-family: sansReg;
src: url(../fonts/openSansReg.ttf);
}
.global-message h4 {
/*for the chat messages*/
margin: 0;
font-size: 15px;
font-family: sansReg;
}
.input {
/*for the chat message input*/
padding-left: 10px;
box-sizing: border-box;
font-size: 15px;
font-family: sansReg;
border: 0;
border-radius: 2px;
background-color: white;
margin: 0 auto;
outline: 0;
background-repeat: no-repeat;
background-position: 2px 3px;
display: block;
}
<div id="chat-box">
<div id="chat-list-container">
<ul id="chat-messages">
<li class="global-message">
<h4>Will: Anyone wanna play?</h4>
</li>
<li class="global-message">
<h4>George: Hey guys!</h4>
</li>
<li class="global-message">
<h4>Jessica: How do i start a game?</h4>
</li>
</ul>
</div>
<input id="chat-message" class="input" type="text" placeholder="Message" maxlength="32" />
</div>
So as you can see I have some h4's to fill the chat and my input below it and I have used the same font but it looks like this:
The h4 element has font-weight bold by default; therefore, if you want to make the input look the same way, you have to add font-weight: bold; to your input style.
Or, if you want to make h4 look like the input, you can remove the bold by setting it to normal font-weight: normal; on the h4 element.
Examples:
*{
font-family: Helvetica, Arial;
}
.normal {
font-weight: normal;
}
.bold {
font-weight: bold;
}
<h4>default bold</h4>
<h4 class="normal">light</h4>
<input value="default light"><br>
<input value="bold" class="bold"><br>
Headings have different default values. In your case you compare an h4 with a paragraph. As you can see below there is a big difference. What you need is to add font-weight: bold; to your .input-class.
H4 default values
h4 {
display: block;
font-size: 1em;
margin-top: 1.33em;
margin-bottom: 1.33em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
Paragraph default values
p {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
}
A "good" practice (or what I try to remember to do) is to copy all default values in for each CSS-element I create. By doing so I have access to all properties and not only those I want to change.
Add css properties font-weight: bold; font-size: 1em to the input field. The font will look identical to the h4 font.
Try adding this to your css:
.global-message h4{
font-weight: normal;
}
It should make all the font look the same.
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">
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
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;
}