4 CSS Tricks That You Should Know

CSS is full of fun and you can't argue on this! The more you work on it, the more you learn about it. You might have seen several pages that are amazingly designed, but often fail to notice the concept behind that. Based on my experiences and observations, I have these 4 CSS techniques which aren't familiar enough to be used by you in your designs. Knowing these will help you a lot by giving you more customization options to your design.

1. Merge Textboxes into your Design

You can do this by selecting the textboxes you want and apply the CSS below. With this code you are removing the border and making the background of the text box transparent. Will be extremely useful in designs, where you want to remove border of the elements and merge them.

input[type='text'] {
    border: 0;
    outline: none;
    outline-offset: 0;
    background:transparent;
    padding:0px;
}

2. Access the disabled Textboxes
Sometimes the background color of the disabled text boxes may annoy your users, might be because of the gray color that comes by default.

input[disabled]{
  color:red;
  background:transparent;
}

3. Change the default selection text color
You can change the color of the selection with the CSS below. Works with webkit as well as firefox.

::selection{
  background-color:orange;
  color:green;
}
::-moz-selection{
  background-color:orange;
  color:green;
}
::-webkit-selection{
  background-color:orange;
  color:green;
}

4. Change the Look and Feel of scroll bars
You can access your scroll bars and modify them into what ever you want. You can see that this blog has different kind of scroll bar than the usual scroll bar ( if you are using webkit). I have no interest in finding the property for mozilla, opera and others, if you do care follow this bug, which might lead to right resource.

::-webkit-scrollbar {
margin-right: 5px;
background-color: #EEE;
width: 7px;
}

::-webkit-scrollbar:horizontal {
margin-right: 5px;
background-color: #EEE;
height: 7px;
}

::-webkit-scrollbar-thumb {
border: 1px #EEE solid;
border-radius: 12px;
background: #777;
-webit-box-shadow: 0 0 8px #555 inset;
box-shadow: 0 0 8px #555 inset;
-webit-transition: all .3s ease-out;
transition: all .3s ease-out;
}

::-webkit-scrollbar-track {
-webit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;
}

That's it for now and hopefully these are useful to you at one point or the other. Stay with us for more interesting posts. You might want to see these interesting posts about CSS.