Solutions from an average UI developer

Place holder can be added to the input box using the attribute “placeholder” When you want to style the placeholder, we have to use ::placeholder selector. Here I have made the placeholder bold and changed color. You can style as per your need.

Many forms will have a field for contact number. Contact number can be given as a single input box What if we wanted to separate the contact number input box into two or more fields? For getting mobile number as input, we can have 3 boxes. First box and second box accepting three numbers and third box accepting 4 numbers. To implement this, we have to create 3 input elements, In order to get only 3 numbers in first two inputs and   4 numbers in last input, we can use the maxlength property Don’t forget to give space after maxlength = 3 and input closing tag. Thus we have three input boxes which accepts 3,3, 4 inputs respectively. Let us make the boxes little cooler!!! Imagine the cursor moving automatically to the next input box when maximum length is reached !!! This can be achieved via Javascript. You can find working code here  jsFiddle Thank you!!

Custom Radio Button Simple radio button can be created by giving input type as "radio" Hence a group of radio buttons are created, What if you wanted to create some colorful radio buttons apart from the typical ones!!  First step is to create a radio button inside a label, so that the name for radio button can be given in label. A label followed by an input with the type as "radio" and then followed by a span in which image for the radio button can be given. Input's id must be given as "for" in label, to map the particular radio input to the respective label. "Name" must be given the same for all radio buttons inside a radio group, in this case, name is given as "smiley". In this example I have created three radio inputs which asks for your favorite smiley. The above code gives the following output, Now we have to style the radio button in order to replace the boring radio button with ou...

When you need to reduce the size of bullet in a list like below, In the above pic, notice that the Sublist items have smaller bullets when compared to main list.  - Create a nested list. If you need help in creating, please refer to  How to create nested list?  - For sub list, give style list-style: none;  - So you will get the below output after removing the list style - Now we have to add bullets which are in smaller size than the default one, - We are going to use pseudo element.  - <li> should be relatively positioned and then pseudo element can be absolutely positioned in relative to the list item. - So for the li element give position as relative , - Now we have to use the " before " pseudo element.  Thus the expected result is achieved. We can change the size of bullet further by changing font-size, top, left attributes. Size of the bullets are increased.

To create a list inside another list item aka nested list as below, You have to create a <ul> inside the particular <li> where you need a nested list. in the above code, main-ul is the outer list and sub-ul is the inner list.

Today my husband asked me for some styling help. He doesn’t know html and css. Sometimes he will need help in his work for changing minor styles. At that time I will feel like a superhero, I will change the color and show him some magic with colors :P He will be like, ”Oh baby you are so talented!!” I helped him in styling a table. Whatever I do, the styles didn’t reflect in the page. I was confused. I stopped all my household works , took his laptop and started debugging. My husband looked at me as if I was diffusing a bomb. I tried all the combinations of selector, restarted the server, refreshed page like 100 times but styles didn’t reflect. I checked the css file in sources tab, styles are available there, but is not rendered in Styles tab. Finally I found the issue. It was because of an unwanted { before the style which was not reflecting  in css file. My husband was happy when I found the issue. He praised me again:P Little he knew that I should have checked...