Styles applied to multiple selectors won't work for both

Question

I have this two rules in scss:

    .fakeinput, input[type=text]{
                    background: white;
                    padding: 10px 0px;
                    border: 1px solid #211915;
                    display: inline-block;
                    width: 100%;
                    height: 35px;
                    &:before{
                        background: none repeat scroll 0 0 white;
                        border-bottom: 1px solid black;
                        border-left: 1px solid black;
                        content: " ";
                        display: block;
                        height: 10px;
                        left: -6px;
                        position: relative;
                        top: 0px;
                        @include transform(rotate(45deg));
                        width: 10px;
                    }
                }

Wich would generate this css:

/* line 60, ../sass/_search.scss */
section#search > div > form .fakeinput, section#search > div > form input[type=text] {
  background: white;
  padding: 10px 0px;
  border: 1px solid #211915;
  display: inline-block;
  width: 100%;
  height: 35px;
}
/* line 67, ../sass/_search.scss */
section#search > div > form .fakeinput:before, section#search > div > form input[type=text]:before {
  background: none repeat scroll 0 0 white;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  content: " ";
  display: block;
  height: 10px;
  left: -6px;
  position: relative;
  top: 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  width: 10px;
}

It works fine for the .fakeinput but not for the input[type=text]

You can check the result here:

http://jsfiddle.net/QAAYd/2/

(the pseudo arrow is only shown for the fakeinput elements)

what am i missing here?

`:before` adds content to be rendered as if it was actually a _child element_ of the targeted element – but input elements can not have child elements. — CBroe, Jul 01 '13 at 11:13

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

This is not working Because

:before is a pseudo-element, not a pseudo-class.

So please don't used to this on input tag

More info Go to here

edited May 23 '17 at 11:50

Community

1
1

answered Jul 01 '13 at 11:16

Rohit Azad Malik

31,410
17
69
97

I see! thanks! so my only chance is to add another html element, right? – Toni Michel Caubet Jul 01 '13 at 11:27
1

now you can used to label or div as like this
now define your div display inline-block and apply css to in your inner div – Rohit Azad Malik Jul 01 '13 at 11:30

Styles applied to multiple selectors won't work for both

1 Answers1