Как назначить внутреннюю тень для входов в CSS

Есть ли способ назначить внутреннюю тень текстовому поле в CSS или JS?Как назначить внутреннюю тень для входов в CSS

Я тестировал внешнюю тень для текстового поля, и все в порядке.

input { 
    box-shadow: 10px 10px 5px #888888; 
}

Но когда я хочу назначить внутреннюю тень для текстового поля, она не работает в Firefox. Он работает в Chrome.

input { 
    box-shadow: inset 10px 10px 5px #888888; 
}

Как я могу это сделать?

ANSWER

Спасибо всем. Я сам нашел ответ. Я использовал -moz-box-shadow и -webkit-box-shadow, но не работал для входов в Firefox, но если я удалю border текстового поля, он назначит внутреннюю тень в Firefox.

Как это:

style="border:none;"

Скриншот: (в Firefox)

Входная тень при appearance: none; и -moz-appearance: none; используются:

ввода тени, когда только border: none; является использованный:

источник

2015-10-06 MojtabaSh

да это делает работу в хроме, но мне нужно работать в Firefox – MojtabaSh

Он работает с Firefox 18 без префикса. Мы в firefox 41 ..... У вас что-то отсутствует или вы не рассказываете нам все. Это мобильное устройство? –

Похоже, что по умолчанию внешний вид должен быть переопределен в Firefox для вставки box-shadow для правильной работы.

input { 
 
    box-shadow: inset 10px 10px 5px #888888; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
    border-width: 0; /* if you don't want the border */ 
 
}

<input type="text" />

источник

2015-10-06 08:25:35 Harry

Спасибо @ Harry ваш код, делающий работу, чтобы показать внутреннюю тень, но появится стеклянная рамка, как кнопка границы вокруг текстового поля, снова спасибо – MojtabaSh

@MojtabaSh: Извините, я не мог понять, что это значит. Можете ли вы опубликовать скриншот? Кроме того, если вам не нужна граница, мы можем просто установить 'border' в none или' border-width' в '0'. – Harry

@MojtabaSh: Хорошо, я понял, что вы имели в виду, посмотрев на скриншот, предоставленный в вопросе. Установка 'border-width: 0', как я упомянул выше, или' border: none', как вы сами сделали, избавится от границ. Кстати, не добавляйте ответ в сам вопрос.Вы можете опубликовать свой собственный ответ и принять его (или) принять один из уже опубликованных ответов. – Harry

Если вы используете Firefox добавить -moz префикса к вашей коробчатой тени.

-moz-box-shadow: inset 2px 5px 3px;

Но это работает только с более старыми браузерами Firefox, поскольку новый 13 < не поддерживает префикс -moz.

источник

2015-10-06 08:20:27 Paran0a

спасибо, но я использовал -moz-boz-shadow и тоже не работает – MojtabaSh

Можете ли вы создать jfiddle вашего примера? И дайте версию firefox us, которую вы используете. – Paran0a

Как назначить внутреннюю тень для входов в CSS

ответ

Смежные вопросы