Можете ли вы создать html-форму кнопок с помощью css?

Мне не нравится стиль кнопки по умолчанию. Это очень скучно. Я использую

<input type="submit">

Кнопки типа

. Могу ли я каким-то образом их нарисовать в css? Если нет, другой способ сделать это, я думаю, было бы использовать div вместо этого и сделать его ссылкой. Как вы делаете эти работы с формами?

Ответ 1

Вы можете легко достичь желаемого с помощью CSS: -

HTML

<input type="submit" name="submit" value="Submit Application" id="submit" />

CSS

#submit {
    background-color: #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius:6px;
    color: #fff;
    font-family: 'Oswald';
    font-size: 20px;
    text-decoration: none;
    cursor: pointer;
    border:none;
}



#submit:hover {
    border: none;
    background:red;
    box-shadow: 0px 0px 1px #777;
}

DEMO

Ответ 2

Да, это довольно просто:

input[type="submit"]{
  background: #fff;
  border: 1px solid #000;
  text-shadow: 1px 1px 1px #000;
}

Я рекомендую дать ему идентификатор или класс, чтобы вы могли легко его настроить.

Ответ 3

Да, вы можете настроить таргетинг на них с помощью input[type=submit] например.

.myFormClass input[type=submit] {
  margin: 10px;
  color: white;
  background-color: blue;
}

Ответ 4

Вы можете напрямую создать свой собственный стиль следующим образом:

 input[type=button]
 { 
//Change the style as you like
 }

Ответ 5

Вы можете добавить:

-webkit-appearance: none;

если вам нужно, чтобы он выглядел последовательным на Mobile Safari...

Ответ 6

напишите ниже стиль в тот же раздел главы html файла или напишите в .css файл

<style type="text/css">
.submit input
    {
    color: #000;
    background: #ffa20f;
    border: 2px outset #d7b9c9
    }
</style>

<input type="submit" class="submit"/>

.submit - в css. означает класс, поэтому я создал класс submit с набором атрибутов и применил этот класс к тегу submit, используя атрибут class