What is the difference between container and container-fluid ?

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

.container has one fixed width for each screen size in bootstrap (xs,sm,md,lg); 

Copy

<div class="container">
  ...
</div>

Use .container-fluid for a full width container, spanning the entire width of your viewport.

.container-fluid expands to fill the available width.

Copy

<div class="container-fluid">
  ...
</div>

Depending on the width of the viewport that the webpage is being viewed on, the container class gives its div a specific fixed width. These lines don't exist in any form for container-fluid, so its width changes every time the viewport width changes.

So for example, say your browser window is 1000px wide. As it's greater than the min-width of 992px, your .container element will have a width of 970px. You then slowly widen your browser window. The width of your .container won't change until you get to 1200px, at which it will jump to 1170px wide and stay that way for any larger browser widths.

Your .container-fluid element, on the other hand, will constantly resize as you make even the smallest changes to your browser width.

Web standards is the present and future in web design – the way all websites should be design and implemented. Websites created using web standards load faster, have better search engine ranking and are easier to update. All the websites I show here have been created this way.

Can I style an placeholder text color on firefox ?

Add opacity: 1 to the Firefox placeholders. 

HTML

<input id="myinput" type="text" placeholder="my placeholder" maxlength="30" name="myplaceholder">


CSS:-

input#myinput::-webkit-input-placeholder {
color:#FFF; background-color:#CCC;
}
input#myinput::-moz-placeholder {
color:#FFF; background-color:#CCC;
    opacity: 1;
}
input#myinput:-moz-placeholder {
color:#FFF; background-color:#CCC;
    opacity: 1;
}
input#myinput::-ms-input-placeholder {
color:#FFF; background-color:#CCC;
} /* IE10+ */



RESULT:-





Web standards is the present and future in web design – the way all websites should be design and implemented. Websites created using web standards load faster, have better search engine ranking and are easier to update. All the websites I show here have been created this way.

Can I style an html radio button to look like a checkbox ?

it's completely achievable in Firefox 1+, Chrome 1+, Safari 3+ and Opera 15+ using the
CSS3 appearance property:

input[type="radio"] {
    -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
    -moz-appearance: checkbox;    /* Firefox */
    -ms-appearance: checkbox;     /* not currently supported */
}

<label><input type="radio" name="radio"> Checkbox 1</label>
<label><input type="radio" name="radio"> Checkbox 2</label>

The result is radio elements that look like checkboxes.

Demo

One Other Demo





Web standards is the present and future in web design – the way all websites should be design and implemented. Websites created using web standards load faster, have better search engine ranking and are easier to update. All the websites I show here have been created this way.

Removing input background colour for Chrome auto complete?

This is my solution :- This solution is work perfectly 

input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active 
{
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}


input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
    -webkit-text-fill-color: #000 !important;
    background-color: #fff;
}

CSS3 Attribute Selectors

CSS3 Substring Matching Attribute Selectors

The CSS3 Selectors module introduces three new attribute selectors, which are grouped together under the heading “Substring Matching Attribute Selectors”.

These new selectors are as follows:

[att^=val] – the “begins with” selector

[att$=val] – the “ends with” selector

[att*=val] – the “contains” selector



The first of these new selectors, which we’ll refer to as the “begins with” selector, allows for the selection of elements where a specified attribute (e.g. the href attribute of a hyperlink) begins with a specified string (e.g. “http://”, “https://” or “mailto:”).

In the same way, the additional two new selectors, which we’ll refer to as the “ends with” and “contains” selectors, allow for the selection of elements where a specified attribute either ends with or contains a specifed string (respectively).

The CSS3 Selectors module was the second of the new CSS3 modules to become an official W3C Recommendation, in September 2011, and the features within can now be considered to be at a stable stage of development. As such, browser support for the three new attribute selectors is relatively widespread – full details can be found in the browser support section near the end of this article.

How they Work

Let’s take a look at each of these new selectors in more detail, including examples to demonstrate how they might be used.

[att^=val] – the “begins with” selector

The “begins with” selector allows for the selection of elements where a specified attribute (e.g. thehref attribute of a hyperlink) begins with a specified string (e.g. “http://”, “https://” or “mailto:”).

The Syntax

element[att^=val]

Examples

a[href^=”http://”]
p[title^=”Hello”]

Here’s a real-life example of the “begins with” selector in use. Below we have a list of links, as follows: a standard web link; a link to a secure website; a mailto: link; an ftp link; and lastly a magnet link. Using the “begins with” selector we can style each link differently, in this case using CSS to apply different icons to the differing link types, by selecting the links we want to style based on the begining of their href attribute.

Here’s the example:

Visit a website

Visit a secure website

Send an email

Connect to an FTP server

Download from a magnet link





Here’s the HTML for this example:

<div class="example1">
<ul>
<li><a href="http://www.google.com">Visit a website</a></li>
<li><a href="https://www.google.com">Visit a secure website</a></li>
<li><a href="mailto:email@email.com">Send an email</a></li>
<li><a href="ftp://www.google.com">Connect to an FTP server</a></li>
<li><a href="magnet:…">Download from a magnet link</a></li>
</ul>
</div>

And here’s the CSS for this example:

div.example1 ul {
list-style-type: none;
}

div.example1 ul li a {
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}

div.examples1 ul li a[href^=”https://”] {
background-image: url(demo-images/lock.png);
}

div.example1 a[href^=”mailto:”] {
background-image: url(demo-images/mail.png);
}

div.example1 a[href^=”ftp://”] {
background-image: url(demo-images/folder_ftp.png);
}

div.example1 a[href^=”magnet”] {
background-image: url(demo-images/magnet.png);
}



[att$=val] – the “ends with” selector

Similar to the “begins with” selector, the “ends with” selector allows for the selection of elements where a specified attribute (e.g. the href attribute of a hyperlink) ends with a specified string (e.g. “.pdf”, “.docx” or “.mp3”).

The Syntax

element[att$=val]

Examples

a[href$=”.pdf”]
p[title$=”World”]

Here’s a real-life example of the “ends with” selector in use. Again we have a list of links, this time as follows: a link to a PDF document; a link to Word document; a link to an Excel document; a link to an MP3 file; and lastly a standard link. Using the “ends with” selector we can style each link differently, in this case using CSS to apply different icons to the differing file types by selecting the links we want to style based on the ending of their href attribute.

Here’s the example:

A link to a PDF document

A link to a Word document

A link to an Excel document

A link to an MP3 file

A normal web link





Here’s the HTML for this example:

<div class="example2">
<ul>
<li><a href="http://www.css3.info/demos/files/1.pdf">A link to a PDF document</a></li>
<li><a href="http://www.css3.info/demos/files/1.docx">A link to a Word document</a></li>
<li><a href="http://www.css3.info/demos/files/1.xlsx">A link to an Excel document</a></li>
<li><a href="http://www.css3.info/demos/files/1.mp3">A link to an MP3 file</a></li>
<li><a href="http://www.css3.info">A normal web link</a></li>
</ul>
</div>

And here’s the CSS for this example:

div.example2 ul {
list-style-type: none;
}

div.example2 ul li a {
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}

div.example2 ul li a[href$=”.pdf”] {
background-image: url(demo-images/pdf.png);
}

div.example2 ul li a[href$=”.docx”] {
background-image: url(demo-images/page_white_word.png);
}

div.example2 ul li a[href$=”.xlsx”] {
background-image: url(demo-images/page_white_excel.png);
}

div.example2 ul li a[href$=”.mp3″] {
background-image: url(demo-images/audio.png);
}



[att*=val] – the “contains” selector

The last of the new substring matching attribute selectors, and perhaps the most powerful, is the “contains” selector, or “wildcard” selector as it is sometimes refered to. The “contains” selector enables designers to select elements where a specified attribute (again we could use the example of the href attribute of a hyperlink) contains a specified string (eg. google.com or yahoo.com).

The Syntax

element[att*=val]

Examples

a[href*=”google.com”]
p[title$=”orl”]

Again, here’s a real life example using a list of hyperlinks, this time; a link to Google, a link to our Twitter profile, a link our Facebook page, a link to Yahoo, and lastly a link to Bing. Using the “contains” selector we can style each link differently based on the contents of the href attribute, in this case by specifying a specific icon for elements where the contents of the href attribute contains a particular domain name.

Here’s the example:

A link to Google

A link to a Twitter profile

A link to a Facebook page

A link to Yahoo

Any other link





Here’s the HTML for this example:

<div class="example3">
<ul>
<li><a href="http://www.google.com">A link to Google</a></li>
<li><a href="http://www.twitter.com/css3">A link to a Twitter profile</a></li>
<li><a href="https://www.facebook.com/css3.info">A link to a Facebook page</a></li>
<li><a href="http://www.yahoo.com">A link to Yahoo</a></li>
<li><a href="http://www.bing.com">Any other link</a></li>
</ul>
</div>

And here’s the CSS for this example:

div.example3 ul {
list-style-type: none;
}

div.example3 ul li a {
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}

div.example3 ul li a[href*=”google.com”] {
background-image: url(demo-images/google.png);
}

div.example3 ul li a[href*=”twitter.com”] {
background-image: url(demo-images/twitter.png);
}

div.example3 ul li a[href*=”facebook.com”] {
background-image: url(demo-images/facebook.png);
}

div.example3 ul li a[href*=”yahoo.com”] {
background-image: url(demo-images/yahoo.png);
}



Browser Support

	Chrome	Firefox	IE	Safari	Opera
[att^=val] – “begins with”	2.0	3.01.0	7.0	1.3	9.59.2
[att$=val] – “ends with”	2.0	3.01.0	7.0	1.3	9.59.2
[att*=val] – “contains”	2.0	3.01.0	7.0	1.3	9.59.2

Table key:

#native selector support (with no known bugs), since version indicated



#native selector support (with known bugs), since version indicated





With development on the CSS3 Selectors module now complete, browser support is relatively widespread, and in fact the CSS3 substring matching attribute selectors have enjoyed widespread browser support for sometime now, although some older versions of certain browsers (particularly Internet Explorer) contain known bugs.

Additional Notes & Further Reading