1

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?

4

1 回答 1

0

这不起作用，因为

:before是一个伪元素，not a pseudo-class.

所以请不要习惯这个input tag

更多信息到这里

于 2013-07-01T11:16:45.943 回答