发表新帖
发表新帖

How to style input and submit button with CSS?

前端 未结
关注
11 814
天涯浪人
天涯浪人 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条回答
  • 终归单人心
    2020-12-12 13:42

    form element UI is somewhat controlled by browser and operating system, so it is not trivial to style them very reliably in a way that it would look the same in all common browser/OS combinations.

    Instead, if you want something specific, I would recommend to use a library that provides you stylable form elements. uniform.js is one such library.

    0 讨论(0)
  • 终归单人心
    2020-12-12 13:46

    When styling a input type submit use the following code.

       input[type=submit] {
    background-color: pink; //Example stlying
    }
    0 讨论(0)
  • 抹茶落季
    2020-12-12 13:46

    Very simple: 

    <html>
<head>
<head>
<style type="text/css">
.buttonstyle 
{ 
background: black; 
background-position: 0px -401px; 
border: solid 1px #000000; 
color: #ffffff;
height: 21px;
margin-top: -1px;
padding-bottom: 2px;
}
.buttonstyle:hover {background: white;background-position: 0px -501px;color: #000000; }
</style>
</head>
<body>
<form>
<input class="buttonstyle" type="submit" name="submit" Value="Add Items"/>
</form>
</body>
</html>

    This is working I have tested.

    0 讨论(0)
  • 梦毁少年i
    2020-12-12 13:51

    http://jsfiddle.net/vfUvZ/

    Here's a starting point

    CSS:

    input[type=text] {
    padding:5px; 
    border:2px solid #ccc; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type=text]:focus {
    border-color:#333;
}

input[type=submit] {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}
    0 讨论(0)
  • 天涯浪人
    2020-12-12 13:51

    For reliability I'd suggest giving class-names, or ids to the elements to style (ideally a class for the text-inputs, since there will presumably be several) and an id to the submit button (though a class would work as well):

    <form action="#" method="post">
    <label for="text1">Text 1</label>
    <input type="text" class="textInput" id="text1" />
    <label for="text2">Text 2</label>
    <input type="text" class="textInput" id="text2" />
    <input id="submitBtn" type="submit" />
</form>

    With the CSS:

    .textInput {
    /* styles the text input elements with this class */
}

#submitBtn {
    /* styles the submit button */
}

    For more up-to-date browsers, you can select by attributes (using the same HTML):

    .input {
    /* styles all input elements */
}

.input[type="text"] {
     /* styles all inputs with type 'text' */
}

.input[type="submit"] {
     /* styles all inputs with type 'submit' */
}

    You could also just use sibling combinators (since the text-inputs to style seem to always follow a label element, and the submit follows a textarea (but this is rather fragile)):

    label + input,
label + textarea {
    /* styles input, and textarea, elements that follow a label */
}

input + input,
textarea + input {
    /* would style the submit-button in the above HTML */
}
    0 讨论(0)
  • 死守一世寂寞
    2020-12-12 13:55

    I would suggest instead of using

    <input type='submit'>

    use

    <button type='submit'>

    Button was introduced specifically bearing CSS styling in mind. You can now add the gradient background image to it or style it using CSS3 gradients.

    Read more on HTML5 forms structure here

    http://www.w3.org/TR/2011/WD-html5-20110525/forms.html

    Cheers! .Pav

    0 讨论(0)
 看不清?
提交回复
热议问题