Стиль входных элементов CSS [закрыт]

Question

Стиль входных элементов CSS [закрыт]

Я пытаюсь стилизовать входной текст и кнопку, как показано ниже:

Введите описание изображения здесь

я связал как это .

Выход не такой, как на картинке. поскольку я новичок в CSS.

Не могли бы вы помочь мне исправить мой код?

571 2

css input

2 ответов:

Comments

Ничего не найдено.

MikeM · Accepted Answer · 2011-08-17 19:16:24

Вы можете использовать комбинацию border-radius и box-shadow для эффекта на картинке

Пример jsfiddle

body {background-color:#636363;}

input[type=text]
{
    background-color: #BFBDBD;
    border:solid 1px #BFBDBD;
    color: #979797;
    height: 28px;
    padding-left:10px;
    width: 191px;
    box-shadow: 2px 2px 0 #828181 inset;
}
input[type=button]
{
    background-color: #1E1E1E;
    color: #979797;
    height: 24px;
    width: 103px;
    color: #bbbbbb;
    text-transform:uppercase;
    box-shadow:-1px 2px #6E6B6A inset;
}

input[type=button], input[type=text]
{
    border: 0;
    border-radius:5px;
    font-family: Sansation,Arial;
}

Brandon · Accepted Answer · 2011-08-17 19:02:56

У вас есть орфографическая ошибка в вашем последнем селекторе говорит inpur вместо input.

Кроме того, у вас нет класса input, вы на самом деле нацелены на сами элементы. Изменить .input на input

Чтобы получить эффект скругленных углов, добавьте радиус границы. Ваше последнее объявление CSS должно выглядеть так с приведенными выше изменениями
input[type=button], input[type=text]
{
    border-radius: 5px;
    font-family: Sansation;
}