Computer >> कंप्यूटर ट्यूटोरियल >  >> प्रोग्रामिंग >> CSS

CSS से इनपुट टाइप रीसेट को स्टाइल करें


इनपुट टाइप बटन सबमिट बटन या रीसेट बटन हो सकता है। CSS से हम वेब पेज पर किसी भी बटन को स्टाइल कर सकते हैं।

इनपुट टाइप बटन को स्टाइल करने के लिए निम्न कोड चलाकर देखें:

उदाहरण

<!DOCTYPE html> <html>    <head>       <style>          input[type = submit], input[type = reset] {             background-color: orange;             border: none;             text-decoration: none;             color: white;             padding: 20px 20px;             margin: 20px 20px;             cursor: pointer;          }       </style>    </head>    <body>       <p>Fill the below form,</p>       <form>          <label for = "subject">Subject</label>          <input type = "text" id = "subject" name = "sub"><br><br>          <label for = "student">Student</label>          <input type = "text" id = "student" name = "stu"><br>          <input type = "reset" value = "Reset">          <input type = "submit" value = "Submit">       </form>    </body> </html>

  1. CSS से वैलिड वैल्यू वाले सभी <input> एलिमेंट्स स्टाइल करें CSS से वैलिड वैल्यू वाले सभी <input> एलिमेंट्स स्टाइल करें

    :valid सिलेक्टर वैलिड वैल्यू वाले सभी <input> एलिमेंट्स को स्टाइल करने के लिए CSS :valid सिलेक्टर का उपयोग करें। उदाहरण <!DOCTYPE html> <html> <head> <style> input:valid { background: red; color: white; } </style> </head

  1. CSS से hr एलिमेंट स्टाइल करना CSS से hr एलिमेंट स्टाइल करना

    hr स्टाइलिंग CSS से <hr> एलिमेंट को स्टाइल करने के लिए निम्न कोड उपयोग करें: उदाहरण <!DOCTYPE html> <html> <meta name=viewport content=width=device-width, initial-scale=1> <head> <style> body{ font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; margin: 20

  1. CSS से लेबल्स स्टाइल करना CSS से लेबल्स स्टाइल करना

    लेबल स्टाइल्स CSS से लेबल्स स्टाइल करने के लिए निम्न कोड उपयोग करें: उदाहरण <!DOCTYPE html> <html> <head> <meta name=viewport content=width=device-width, initial-scale=1 /> <style> body { font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif; margin: 20px; } span