Change placeholder color CSS - cross browser

If you are not using labels in your html text fields you may need to add a placeholder for the text box. But changing placeholder color of an HTML input text field according to your web template need few  CSS lines to work in all major web browsers. You have to use different types of pseudo elements to get the job done.

Change placeholder color CSS - cross browser



.form-control::-webkit-input-placeholder { 
/* WebKit, Blink, Edge */
    color:    #a5a5a5;
}
.form-control:-moz-placeholder { 
/* Mozilla Firefox 4 to 18 */
   color:    #a5a5a5;
   opacity:  1;
}
.form-control::-moz-placeholder { 
/* Mozilla Firefox 19+ */
   color:    #a5a5a5;
   opacity:  1;
}
.form-control:-ms-input-placeholder { 
/* Internet Explorer 10-11 */
   color:    #a5a5a5;
}
.form-control::-ms-input-placeholder { 
/* Microsoft Edge */
   color:    #a5a5a5;
}
.form-control::placeholder { 
/* Most modern browsers support this now. */
   color:    #a5a5a5;
}

CSS Positions Sticky - a new CSS3 Position make life easy

Making sticky elements was not that straightforward in old days you may have heard sticky headers footers and even sticky.js like javascript files to do the job to create sticky elements in your web pages.

In older CSS versions there were three values for position: relative | absolute | fixed .  We can change the offsets of these values by giving bottom or top and left or right.

Relative - Current position of the page -  can change it with top left right values without inheriting the other elements in the page

Absolute - Absolute is used to position an element within its parent element. (if the parent element have a  position)

Fixed - similar to absolute but it positioned relative to the web browser window instead of the parent div or element even when you scroll

The new value Position : Sticky is a combination of RELATIVE and FIXED

This will be relatively positions untill it reached a value of offset while scrolling the page.
Then it will become fixed.


.sticky{
top:200px;
position:sticky;
}


This feature will not suport in any version of IE or Opera Mini broswers

Custom image upload and preview inside the button


Customizing HTML file upload button is not always easy. Here is a way to create a custom image upload button (custom file upload button) with CSS Javascript and Jquery and preview the uploaded image instead of the image we used for the custom button. 


HTML

<div class="image-upload">
    <label for="file-input">
        <img src="http://goo.gl/pB9rpQ" id="blah" />
    </label>
    <input id="file-input" type="file"/>
</div>

CSS

.image-upload > input
{
    display: none;
}
.image-upload img
{
    width: 80px;
    cursor: pointer;
}

Javascript

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}
$("#file-input").change(function() {
  readURL(this);
});

Custom radio buttons with CSS only

Do you want to customize the ugly radio buttons in your web forms . There are some plugins like icheck to do the job but when the page loading time matters you may not want to call those unwanted heavy css and javascript files.

There is a way to customize the radios buttons with only css3. it has cross browser support because thse days almost all the web browsers support it.

What it does is hiding the default radio buttons and using CSS Pseudo-elements adding some stylish buttons.

The working code is below

HTML

<div class="alert">
  <ul>
  <li>
    <input type="radio" id="f-option" name="selector">
    <label for="f-option">Pizza</label>
    
    <div class="check"></div>
  </li>
  
  <li>
    <input type="radio" id="s-option" name="selector">
    <label for="s-option">Bacon</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
  
  <li>
    <input type="radio" id="t-option" name="selector">
    <label for="t-option">Cats</label>
    
    <div class="check"><div class="inside"></div></div>
  </li>
</ul>
</div>

CSS

ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 50px;
}

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label{
    color: #dedede;
}

ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid #dedede;
}

ul li .check::before {
  display: block;
  position: absolute;
    content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
    left: 5px;
  margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 5px solid #0DFF92;
}

input[type=radio]:checked ~ .check::before{
  background: #0DFF92;
}

input[type=radio]:checked ~ label{
  color: #0DFF92;
}

How to get a .com for your blogger.com just 0.99 USD

A website for just 0.99 USD with free web hosting

Good news. if you are using blogger.com to maintain a blog or a website with the main domain .blogspot.com which provided as a free service by google with unlimited bandwidth and hosting space for images and video, you can now get a .com premium domain name for your blogger blogspot web site or blog for just 0.99 USD for the first year from godaddy.


You can get a first year discount from godaddy for just 0.99 usd for your blogspot from GoDaddy 99 Cents Domain Coupons

https://springcoupon.com/godaddy-99-cent-coupon-code/

How to get a .com for your blogger.com just 0.99 USD
 here is the proof


Now you can log in godaddy account and go to Domain manager and add the DNS recored as in your blogger Settings > Publishing. 
There will be two records to add.



Add these CNAME / DNS records to the Manage section in your domain settings in Godaddy.  Do not forget to tick the non www to www redirection in the settings.  Now your blogger blogspot website or blog should work with your newly purchased .com domain for just 0.99 USD + ICANN fee.

Enjoy.

Search This Blog