Contact Form 7 uses minimum CSS for styling and validation. Hence lacking of better UI designing. We can overcome this issue by styling Contact Form 7 validation with border which I’m describing here in this article. Here, we will apply some CSS rules for validation customization on Contact Form 7 forms including styling Contact Form 7 validation with border.
Category » HTML – CSS
Top Fixed Menu Bar on Scroll with CSS & jQuery – Less Code
Here I am writing minimum code to make Top Fixed Menu Bar on Scroll with CSS & jQuery. The purpose of this article is to have the navigation menu fixed at top when visitors scroll down the page and place menu back to it’s original position when scrolling back to upside.
Change HTML5 placeholder color with CSS for input & textarea
Below is the code snippet to change HTML5 placeholder color with CSS which are used in form input and textarea fields. The explanation and uses notes are further explained.
/* WebKit browsers */
::-webkit-input-placeholder {
color: blue;
}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
color: blue;
opacity: 1;
}
/* Mozilla Firefox 19+ */
::-moz-placeholder {
color: blue;
opacity: 1;
}
/* Internet Explorer 10+ */
:-ms-input-placeholder {
color: blue;
}Check or Select / Deselect all Checkboxes using jQuery
Either newbie or experienced developer, everyone occasionally needs a quick jQuery snippet that selects and deselects multiple checkboxes by clicking “Select All” checkbox (exactly like in Gmail). Here are two code snippet that perform the same action. You can use either of them.
We are creating two functions (in each code snippet).
Add and Remove Classes using JavaScript
Add and Remove Classes using JavaScript is quite handy. Even it’s better to use a JavaScript framework or a library for such common tasks and I have mentioned the reason behind doing so at the end of article, these JavaScript code to adding and removing classes are worth considerable.
Power CSS3 – pseudo-class and pseudo-element selectors
This last article in the series about CSS3 selectors will tell you about Pseudo-class and Pseudo-element. Pseudo-class targets an element when it’s in a particular state or specific elements in a stack. A pseudo-element is composed of two colons- ::
Power CSS3 – Attribute Selectors
This tutorial will cover a detail description about the capability of Attribute Selectors in CSS3. The attribute selectors target elements based on the presence of HTML attributes and/or it’s value and are declared using square brackets.
Descendant, Adjacent, Child, Sibling Combinators and Selectors
Coming into second part of Power CSS3 selectors, we will learn here about Descendant, Adjacent, Child, Sibling Combinators and Selectors that make our styling task lots easier.
1. X Y (Descendant Combinator)
2. X + Y (Adjacent Combinator)
3. X > Y (Child Combinator)
4. X ~ Y (Sibling Combinator)
Power CSS3 – universal, type, id and class selectors
CSS3 selectors actually select the content we want to style. Obviously a CSS selector is the part of a CSS rule set. Here we will be familiar with the power of basic CSS3 selectors:
1. * (universal selector)
2. X (type selector)
3. #X (id selector)
4. .X (class selector)
Make a HTML, CSS, JS try it yourself editor
Making a try it yourself editor is a very easy and 5 minutes task if you know the concept behind it. Here I’m telling you step by step to create a try it yourself editor like w3 schools that would be able to run your HTML, CSS and javascript code online and display the result in iframe.
[ Page 5 of 7 ]