Search bar border change color


1 Comentários

  • Kyle B

    That was a fun little project! I played around and was able to find what I think you're looking for. 

    All changes are made within the style.css. To change the color, you can add the following code:

    color: red;
    rgba(0, 0, 0, 0.15);
    color: #fff;

    Or whatever other types of color code you want (let me know if you aren't familiar with color codes and I can help you out).

    Change color of magnifying glass:

    .search-icon {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    left: 15px;
    z-index: 1;
    width: 18px;
    height: 18px;


    Change the border and blinky line when selected on the home screen:

    .search-full input[type="search"] {
    border: 1px solid #fff;

    For this, if you want to change the color of the blinky line, add a "color" line. If you want to change the border color (which I'm assuming is what you are looking for), change the border to something like:

    border: 1px solid red;

    This will make it stand out while on the home screen. 


    Change border color on article page:

    .search input[type="search"] {
    border: 1px solid red;
    border-radius: 30px;
    box-sizing: border-box;
    color: red;
    height: 40px;
    padding-left: 40px;
    padding-right: 20px;
    -webkit-appearance: none;
    width: 100%;

    This needs to be changed as well if you want to have the same changes while on an article. Same changes need to be made as above so just copy whatever you did into this. 

    I hope this helps! Let me know if you have any questions or if it doesn't work and I can look at your code if you want. 


Por favor, entrar para comentar.

Powered by Zendesk