माउसओवर पर "सबमिट" इनपुट कैसे स्टाइल करें, क्लिक करें?

Question

मुझे माउसओवर पर और अलग-अलग बटनों की तरह दिखाई देने के लिए दो अलग-अलग इनपुट स्टाइल करने की आवश्यकता है। आमतौर पर मैं बटन का उपयोग करता हूं; हालांकि, इनमें से एक इनपुट प्रकार = "रीसेट" है और मुझे लगता है कि फ़ॉर्म रीसेट स्क्रिप्ट लिखने के बजाय इसके लिए इनपुट का उपयोग करना आसान है। माउस स्टाइल के लिए सीएसएस के साथ "सबमिट" और "रीसेट" प्रकारों के साथ एक शैली इनपुट कैसे करता है और क्लिक करें?

Answer 1

यह मानते हुए कि आप सीएसएस में मतलब है, बल्कि एक जावास्क्रिप्ट दृष्टिकोण से, आप छद्म वर्गों का उपयोग कर सकते हैं:

input[type=reset], /* CSS2.1 attribute-equals selector */ 
#resetButtonID, 
.resetButtonClass-Name { 
    /* the reset button */ 
} 

input[type=reset]:hover, 
#resetButtonID:hover, 
.resetButtonClass-Name:hover { 
    /* the reset button when hovered over */ 
} 

input[type=reset]:active, 
#resetButtonID:active, 
.resetButtonClass-Name:active { 
    /* the reset button when mouse-down */ 
} 

input[type=reset]:focus, 
#resetButtonID:focus, 
.resetButtonClass-Name:focus { 
    /* the reset button when focussed by keyboard-navigation */ 
} 

JS Fiddle demo।

Answer 2

यह सीएसएस में किसी भी अन्य तत्व के समान है, होवर और फोकस के लिए psuedo चयनकर्ता हैं, लेकिन विशेष रूप से क्लिक के लिए नहीं। आप यह भी विशेषता का भी उपयोग कर सकते हैं: जब उपयोगकर्ता शुरू में क्लिक

input[type="reset"]{/* attribute selector*/} 
input[type="reset"]:hover{/* :hover psuedo selector*/} 
input[type="reset"]:focus{/* :focus psuedo selector*/} 
input[type="reset"]:active{/* :active psuedo selector (for click)*/} 

फोकस शैली लागू किया जाएगा (या निश्चित रूप से केंद्रित है), लेकिन एक बार उपयोगकर्ता चाल एक और तत्व को ध्यान केंद्रित शैली खो देंगे। माउस बटन नीचे होने पर उस छोटे पल के लिए विशेष रूप से क्लिक शैलियों को प्राप्त करने के लिए, जावास्क्रिप्ट का उपयोग करें या :active चयनकर्ता का प्रयास करें, जिसे (मुझे अभी एहसास हुआ) गैर-एंकर तत्वों पर लागू किया जा सकता है।