CODEWITHSUNDEEP
csshtml
sasi
sasi

Reputation: 99

CSS placeholder issue in HTML5

This is the code I have tried:

HTML5:

<section class="featured">
    <p><img src="img/Defense.png" />ABOUVESTIBULUM ANTE IPSUM PRIMIS IN FAUCIBUS ORCILUCTUS</p>
    <form>
        <input type="text" placeholder="SUBSCRIBE TO OUR NEWSLETTER"/>
    </form>
</section>

CSS:

.featured { 
    background-color: darkgray;
    color:#fff; 
    padding:10px;
    display: flex;  
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}
input[type=text] {
    border-radius:0px;
    padding: 14px 86px 14px 18px;
    margin-left: 164px;
    margin-top: 8px;
}
form {
    float:right;
    margin:0;   
}

My page looks like this: http://postimg.org/image/6vlweo5sz/5d213f6c/

May I know why the placeholder content is not displayed properly?

Is this approach correct or not?

Upvotes: 0

Views: 78

Answers (3)

ROMANIA_engineer
ROMANIA_engineer

Reputation: 56626

There is too much padding for the input box.

padding: 14px 86px 14px 18px;

The order is top - right - bottom - left. You can adjust the second and the fourth value.

If you need that padding, increase the width.

Another thing that could be useful in other similar cases is:

input[placeholder] { 
    text-overflow: ellipsis; 
}

because it specifies the behavior if the text is longer that your box.

Upvotes: 0

user2575725
user2575725

Reputation:

You may try using size attribute:

<input type="text" placeholder="SUBSCRIBE TO OUR NEWSLETTER" size="45"/>

Upvotes: 1

Devin
Devin

Reputation: 7720

change your CSS input properties to this:

input[type=text] {
    border-radius:0px;
    padding: 14px 18px 14px 18px;
    margin-left: 164px;
    margin-top: 8px;
    width:240px;
}

your padding right makes no sense at all, what you need to give is a width to the input element. Alternatively, if you don't want it to be that wide, add a smaller font-size, like font-size:10px;

I have added bot options to a fiddle here

Upvotes: 1

Related Questions