可以用你的CSS样式的HTML表单按钮?(Can you style html form butto

2019-07-20 02:51发布

我不喜欢默认的按钮样式。 这真的很无聊。 我在用

<input type="submit">

类型按钮。 我可以在CSS样式不知何故这些? 如果不是这样,我想这样做的另一种方法是使用一个div来代替,并使它成为一个链接。 你如何使用这些形式的工作?

Answer 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



Answer 2:

是的,这是很简单的:

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

我建议给它一个ID或一类,这样就可以更轻松地瞄准它。



Answer 3:

是的,你可以将这些specificaly使用input[type=submit]

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


Answer 4:

您可以直接以这种方式创造自己的风格:

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


Answer 5:

您可能要添加:

-webkit-appearance: none; 

如果你需要它在移动Safari寻找一致...



Answer 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。 指类,所以我创建提交类的属性集
并应用了类提交标记,使用class属性



文章来源: Can you style html form buttons with css?
标签: html css forms