Can't set font-weight on the :after pseudo-element used on <input> elements
Asked Answered
M

1

6

So, i've got a custom style on an input element, and I want to place some text on the input with the use of :after.

The problem i'm running into is that i cannot seem to change the font-weight on the :after element, this problem only occurs with the combination of input and :after elements.

CSS

input[type="checkbox"] { /* enable styling of the checkbox ! */
    -moz-appearance: none;
    -webkit-appearance: none;
}

input { /* set up some basic styles.... */
    background-color:#ccc;
    width:200px;
    height:200px;
    background-color:grey;
}

input:after { /* and we create the :after element */
    width:100%;
    text-align:center;
    font-weight:100; /* THIS DOESN'T WORK FOR SOME REASON */
    content: "This should be thin"; /* some text */
}

JSFIDDLE

http://jsfiddle.net/xQVfL/1/

TESTED ON

Chrome for mac (latest)

QUESTION

Why can't I set font-weight on the :after element set on an input element?

Mojave answered 9/8, 2013 at 15:4 Comment(8)
Seems to work for me.. 700 makes it bold.. and 100 makes it thinBridewell
I'm using chrome (mac) and it doesn't workMojave
100 basically means normal weight.. does 700 make it bold for you? look here w3schools.com/cssref/…Bridewell
I noticed that the content doesn't show up in Firefox, but does in Chrome. The text or the gray background both do not work in FF.Conservatism
@Conservatism The grey background work's fine for me, it's just the font-weight that isnt workingMojave
@Mojave I was just pointing it out in case you were worried about browser compatibility.Conservatism
@Conservatism Yeah I just noticed that it's really messed up in firefox, thanksMojave
possible duplicate of CSS :after pseudo element on INPUT fieldDoornail
O
2

This was answered here. It seems :after was intended for appending to container tags only. Can I use the :after pseudo-element on an input field?

Outskirts answered 9/8, 2013 at 15:10 Comment(1)
Well... that sucks. Gonna wait a little longer, maybe someone comes up with a workaround, else ill accept you answer.Mojave

© 2022 - 2024 — McMap. All rights reserved.