Problem css place holder in Chrome & Safari HTML & CSS

Discussion in 'HTML & Website Design' started by pamyral2015, Dec 3, 2015.

0
  1. #1
    Hi all ,
    I have link : http://103.48.83.28:8088/
    css for place holder in box search is not good as image : http://103.48.83.28:8088/error.png1

    Its good in firefox but problem in chrome and safari. Anyone help me out ?

    Thank you very much.
     
    pamyral2015, Dec 3, 2015 IP
  2. Rahul Vaishnav

    Rahul Vaishnav Active Member

    Messages:
    123
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    63
    #2
    Hey Use this code for chrome
    input::-webkit-input-placeholder {
    color: #000;
    margin-left:15px;
    }
    and i cant open http://103.48.83.28:8088/error.png1 this image.
     
    Rahul Vaishnav, Dec 4, 2015 IP
  3. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #3
    Holy shit, that's a LOT of crappy code for something VERY simple...
    You have several hundred lines of CSS for styling the form. WHY? The form breaks when you reduce the size of the page (the Find-button disappears, and if you reduce it enough, the placeholders get obfuscated by the huge downwards arrow)
    Just remove any styling you have for ::placeholder in the CSS? It will fix the problem, I'm sure.
    But even better: get rid of that bloated, crappy code, create the forms with proper markup, and make sure you don't overuse the CSS-stylings. 90% of the CSS for the form-elements are bloat, and most of it isn't even used (it's surpassed by later rules, hence it's just making the CSS-file bigger).
     
    PoPSiCLe, Dec 4, 2015 IP
    webcosmo, deathshadow and COBOLdinosaur like this.
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #4
    @PoPSiCLe is being polite, but really I think you've got two major failings here.

    1) Placeholder is not something that's supposed to let you style it in the first place.

    2) Placeholders ARE NOT LABELS!!! No matter how many ignorant halfwit artsy fartsy types cream their panties over abusing the element that way, just as scripttards did a decade ago, it is piss poor usability thanks to a combination of ambigous UI and loss of context.

    Do yourself and visitors to the site a favor and GET SOME BLASTED LABEL TAGS IN THERE!!!

    http://www.webaxe.org/placeholder-attribute-is-not-a-label/
    http://www.pardot.com/faqs/best-practices/placeholders-and-labels/
    http://baymard.com/blog/false-simplicity

    ... and even the HTML 5 specification itself:
    http://www.w3.org/TR/html5/single-page.html#the-placeholder-attribute

    ... and I quote:
    ... and yeah, that entire disaster needs to be pitched in the trash and started over. Illegible colour contrasts, fixed metric fonts, design concepts that have no business on a website if you actually care about people using the site...
     
    deathshadow, Dec 8, 2015 IP
    webcosmo likes this.