CSS Tricks

CSS Tricks

To change autofill input text color and background:

/* Change the defaul browser colors */
input::placeholder {
    color: red;
    font-size: 1.2em;
    font-style: italic;
}

input {
    caret-color: red; /* cursor color */
}

input:-webkit-autofill, 
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{ 
   -webkit-box-shadow: 0 0 0 30px #151515 inset !important; 
   -webkit-text-fill-color: #ffffff !important;
}

To place a div (with position:absolute;) element in the center of container (with position:relative;):

#container {
   position: relative; 
}
#content {
   position: absolute; 
   left: 0; 
   right: 0; 
   margin: 0 auto; 
   width: 100px; /* Need a specific value to work */
}

To change styles for scrollbar of an element:

/* width */
#content::-webkit-scrollbar {
  width: 10px;
}

/* Track */
#content::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
#content::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
#content::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.