3

http://jsfiddle.net/qg9Rj/

#button-cart:before {
    background-color: black;
    content:" ";
    height: 37px;
    position: fixed;
    right: 0;
    top: 0;
    width: 25px;
    display:block;
}
#button-cart:after {
    background-color: black;
    content:"*";
    height: 17px;
    left: 0;
    position: fixed;
    top: 0;
    display:block;
}
<input type="button" value="ПОЛОЖИТЬ В КОРЗИНУ" id="button-cart" class="button">

Почему не показываются черные блоки по углам?

2 ответа 2

15

селекторы :before и :after применяется ко всем элементам, но результат не везде даёт.

:before и :after добавляет контент к содержимому элемента, а у input же как такового содержимого нет.

Решение - завернуть инпуты в div и к нему уже применять псевдоэлементы.

3
  • 1
    Проще говоря - применяется к парным тегам, контейнерам. А к инпутам, картинкам и прочим не применяется. Как применяется я недавно рассказывал: hashcode.ru/questions/259313/…
    – Cypher
    1 ноя 2013 в 12:34
  • 2
    Решение - использовать button так как это контейнер в отличии от input
    – Cypher
    1 ноя 2013 в 12:35
  • 1
    Да, совершенно верно
    – soledar10
    1 ноя 2013 в 12:40
3

Замени input на button.

И используй text-transform: uppercase; вместо написания текста заглавными буквами.

1
  • Ответ еще тогда был, зачем писать? 22 июл 2015 в 14:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.