发表新帖
发表新帖

How to style input and submit button with CSS?

前端 未结
关注
11 815
天涯浪人
天涯浪人 2020-12-12 13:25

I\'m learning CSS. How to style input and submit button with CSS?

I\'m trying create something like this but I have no idea how to do
相关标签:
11条回答
  • 猫巷女王i
    2020-12-12 13:57

    Simply style your Submit button like you would style any other html element. you can target different type of input elements using CSS attribute selector

    As an example you could write 

    input[type=text] {
   /*your styles here.....*/
}
input[type=submit] {
   /*your styles here.....*/
}
textarea{
   /*your styles here.....*/
}

    Combine with other selectors

    input[type=text]:hover {
   /*your styles here.....*/
}
input[type=submit] > p {
   /*your styles here.....*/
}
....

    Here is a working Example

    0 讨论(0)
  • 慢半拍i
    2020-12-12 13:58

    I did it this way based on the answers given here, I hope it helps

    .likeLink {
    background: none !important;
    color: #3387c4;
    border: none;
    padding: 0 !important;
    font: inherit;
    cursor: pointer;
}
    .likeLink:hover {
        background: none !important;
        color: #25618c;
        border: none;
        padding: 0 !important;
        font: inherit;
        cursor: pointer;
        text-decoration: underline;
    }
    0 讨论(0)
  • 小蘑菇
    2020-12-12 14:01

    Actually, this too works great.

    input[type=submit]{
                 width: 15px;
                 position: absolute;
                 right: 20px;
                 bottom: 20px;
                 background: #09c;
                 color: #fff;
                 font-family: tahoma,geneva,algerian;
                 height: 30px;
                 -webkit-border-radius: 15px;
                 -moz-border-radius: 15px;
                 border-radius: 15px;
                 border: 1px solid #999;
             }
    0 讨论(0)
  • 滥情空心
    2020-12-12 14:02

    HTML

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS3 Button</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<a href="#" class="btn">Push</a>
</div>
</body>
</html>

    CSS styling

    a.btn {
display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto;

background: #398525; /* old browsers */
background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */

box-shadow: inset 0px 0px 6px #fff;
-webkit-box-shadow: inset 0px 0px 6px #fff;
border: 1px solid #5ea617;
border-radius: 10px;
}
    0 讨论(0)
  • 盖世英雄少女心
    2020-12-12 14:04

    HTML

    <input type="submit" name="submit" value="Send" id="submit" />

    CSS

    #submit {
 color: #fff;
 font-size: 0;
 width: 135px;
 height: 60px;
 border: none;
 margin: 0;
 padding: 0;
 background: #0c0 url(image) 0 0 no-repeat; 
}
    0 讨论(0)
 看不清?
提交回复
热议问题