How to create custom elements styled like material design?
Question: I love material design. I love jquery, web forms and elements. It have many
styles. But when i use PyQt i have default button and checkbox...

I love something like this: ![enter image description
here](http://i.stack.imgur.com/7du9s.jpg)

Can I change qt elements so that they become similar to the elements of web-
forms? Tell me what to read or may have examples of how to do this already? I
just do not know if this is possible because I do not know in which direction
to look for ...

i use qt4 and windows... and know only python, not C/C++


Answer: Start creating your own widgets and override the paintEvent

I am putting in an example here that mostly summarizes what you need to know.  
The example shows the checkbox as an on/off button.

    
    
    from PyQt4 import QtGui, QtCore
    import sys
    #===============================================================================
    # MyCheckBox
    #===============================================================================
    #className
    class MyCheckBox(QtGui.QCheckBox):
    #|-----------------------------------------------------------------------------|
    # class Variables
    #|-----------------------------------------------------------------------------| 
        #no classVariables
    
    #|-----------------------------------------------------------------------------|
    # Constructor  
    #|-----------------------------------------------------------------------------|
        def __init__(self, *args, **kwargs):
                QtGui.QCheckBox.__init__(self, *args, **kwargs)
                self.setStyleSheet("background-color: rgb(0, 0, 0);\n" + 
                          "color: rgb(255, 255, 255);\n")
                #set default check as True 
                self.setChecked(True)
                #set default enable as True
                #    if it set to false will always remain on/off
                #    here it is on as setChecked is True
                self.setEnabled(True)
                self._enable = True
    #|--------------------------End of Constructor---------------------------------| 
    #|-----------------------------------------------------------------------------|
    #   mousePressEvent
    #|-----------------------------------------------------------------------------|
        #overrite 
        def mousePressEvent(self, *args, **kwargs):
                #tick on and off set here
                if self.isChecked():
                    self.setChecked(False)
                else:
                    self.setChecked(True)
                return QtGui.QCheckBox.mousePressEvent(self, *args, **kwargs)
    #|--------------------------End of mousePressEvent-----------------------------| 
    
    #|-----------------------------------------------------------------------------| 
    # paintEvent
    #|-----------------------------------------------------------------------------|
        def paintEvent(self,event):
    
                #just setting some size aspects
                self.setMinimumHeight(40)
                self.setMinimumWidth(100)
                self.setMaximumHeight(50)
                self.setMaximumWidth(150)
    
                self.resize(self.parent().width(),self.parent().height())
                painter = QtGui.QPainter()
                painter.begin(self)
    
                #for the black background
                brush = QtGui.QBrush(QtGui.QColor(0,0,0),style=QtCore.Qt.SolidPattern)
                painter.fillRect(self.rect(),brush)
    
    
                #smooth curves
                painter.setRenderHint(QtGui.QPainter.Antialiasing)
    
                #for the on off font
                font  = QtGui.QFont()
                font.setFamily("Courier New")
                font.setPixelSize(28)
                painter.setFont(font)        
    
                #change the look for on/off
                if self.isChecked():
                    #blue fill
                    brush = QtGui.QBrush(QtGui.QColor(50,50,255),style=QtCore.Qt.SolidPattern)
                    painter.setBrush(brush)
    
                    #rounded rectangle as a whole
                    painter.drawRoundedRect(0,0,self.width()-2,self.height()-2, \
                                       self.height()/2,self.height()/2)
    
                    #white circle/button instead of the tick mark
                    brush = QtGui.QBrush(QtGui.QColor(255,255,255),style=QtCore.Qt.SolidPattern)
                    painter.setBrush(brush)
                    painter.drawEllipse(self.width()-self.height(),0,self.height(),self.height())
    
                    #on text
                    painter.drawText(self.width()/4,self.height()/1.5, "On")
    
                else:
                    #gray fill
                    brush = QtGui.QBrush(QtGui.QColor(50,50,50),style=QtCore.Qt.SolidPattern)
                    painter.setBrush(brush)
    
                    #rounded rectangle as a whole
                    painter.drawRoundedRect(0,0,self.width()-2,self.height()-2, \
                                       self.height()/2,self.height()/2)
    
                    #white circle/button instead of the tick but in different location
                    brush = QtGui.QBrush(QtGui.QColor(255,255,255),style=QtCore.Qt.SolidPattern)
                    painter.setBrush(brush)
                    painter.drawEllipse(0,0,self.height(),self.height())
    
                    #off text
                    painter.drawText(self.width()/2,self.height()/1.5, "Off")
    
    
    #|-----------------------End of paintEvent-------------------------------------|
    if __name__ == '__main__':
        app = QtGui.QApplication(sys.argv)
        wgt = QtGui.QWidget()
        wgt.setStyleSheet("background-color: rgb(0, 0, 0);\n")
        cb = MyCheckBox()
        cb.setParent(wgt)
        layout = QtGui.QHBoxLayout()
        layout.addWidget(cb)
        wgt.resize(200,100)
        wgt.show()
        sys.exit(app.exec_())
    

# EDIT:

Attaching screen-shots for how it looks

![enter image description here](http://i.stack.imgur.com/uwnJP.png) ![enter
image description here](http://i.stack.imgur.com/msgy6.png)

