Category Archives: CSS3

How to increase Checkbox size in HTML/CSS

Now you can easily increase the size of the HTML checkbox. You just need to apply CSS3 properties.
Here is the CSS code to add with your CSS class or ID.


input[type="checkbox"]{
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari and Chrome */
    -o-transform: scale(2); /* Opera */
}

Responsive Table

Hello Folks,
You can make the HTML table responsive with some CSS tricks. See the below example and try it.


<div class="responsive-table">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <th><b>First Name</b></th>
      <th><b>Last Name</b></th>
      <th><b>Gender</b></th>
      <th><b>Phone</b></th>
      <th><b>Email</b></th>
    </tr>
    <tr>
      <td>John</td>
      <td>Cena</td>
      <td>Male</td>
      <td>123-456-7890</td>
      <td>abc123@gmail.com</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Cena</td>
      <td>Male</td>
      <td>123-456-7890</td>
      <td>abc123@gmail.com</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Cena</td>
      <td>Male</td>
      <td>123-456-7890</td>
      <td>abc123@gmail.com</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Cena</td>
      <td>Male</td>
      <td>123-456-7890</td>
      <td>abc123@gmail.com</td>
    </tr>
  </table>
</div>


.responsive-table{
    width: 100%;
    overflow-y:hidden
}

First NameLast NameGenderPhoneEmail
JohnCenaMale123-456-7890abc123@gmail.com
JohnCenaMale123-456-7890abc123@gmail.com
JohnCenaMale123-456-7890abc123@gmail.com
JohnCenaMale123-456-7890abc123@gmail.com

Full width DIV inside container


<div class="container">
    <div class="my-wrapper">         
        <div class="my-container">Your content goes here...</div>
    </div>
</div>


html {
    width: 100%;
    height: 100%;
}

.container {
    width: 300px;
    background-color: red;
    margin: 0 auto;
    height: 1000px;
    position: relative;
    padding-top: 100px;
}

.my-wrapper {
    position: relative;
}

.my-container {
    height: 300px;
    background-color: #0f0;
    width: 100vw;
    margin-left: calc(-50vw + 50% - 8px);
    position: relative;
}

CSS @import Rule

Importing Google Web Font in CSS file.


@import url('https://fonts.googleapis.com/css?family=Open+Sans');

Importing stylesheet into an existing stylesheet.


@import url("custom-stylesheet.css");