Home › Forums › Basel support forum › Basel theme – Search field placeholder color

Basel theme – Search field placeholder color

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • May 4, 2021 at 7:02 pm #289524

    Suleiman91
    Participant

    Hi Xtemos Team,

    I have challenge in the color of place holder, trying to change the color of placeholder but it is not changing !

    Can you help me please ?

    <div>
					<label class="screen-reader-text">Search for:</label>
					<input type="text" class="search-field" placeholder="Search for products" value="" name="s" id="s" autocomplete="off">
					<input type="hidden" name="post_type" id="post_type" value="product">
										<button type="submit" id="searchsubmit" value="Search">Search</button>
					
				</div>
    .whb-column .searchform input[type=text]::placeholder {
	color: red;
}

.searchform input[type=text] {
    color: red;
}
    Attachments:
    You must be logged in to view attached files.
    May 5, 2021 at 8:22 pm #289939

    Elise Noromit
    Member

    Hello,

    Please add this code to the Theme Settings > Custom CSS > Global:

    body .main-header.color-scheme-light .search-extended input[type=text] {
    color: red;
}
body .main-header.color-scheme-light .search-extended input[type=text]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
body .main-header.color-scheme-light .search-extended input[type=text]::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
body .main-header.color-scheme-light .search-extended input[type=text]:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
body .main-header.color-scheme-light .search-extended input[type=text]:-moz-placeholder { /* Firefox 18- */
  color: pink;
}

    Best Regards

    May 7, 2021 at 7:46 pm #290629

    Suleiman91
    Participant

    Hi Dear,

    I have added the code into the global css, but there is no change in the style, still place holder is white

    Attachments:
    You must be logged in to view attached files.
    May 8, 2021 at 10:01 am #290747

    Elise Noromit
    Member

    Hello,

    Please please, provide your site admin access to the private area.

    Best Regards

    May 9, 2021 at 7:33 pm #291031

    Suleiman91
    Participant

    Hi Dear,

    please check the site as below credential.

    May 10, 2021 at 8:01 am #291162

    Elise Noromit
    Member

    Hello,

    Please replace the code with this one: 

    .mobile-nav .searchform input[type=text]::-webkit-input-placeholder { 
  color: pink;
}
.mobile-nav .searchform input[type=text]::-moz-placeholder { 
  color: pink;
}
.mobile-nav .searchform input[type=text]:-ms-input-placeholder { 
  color: pink;
}
.mobile-nav .searchform input[type=text]:-moz-placeholder { 
  color: pink;
}

    Best Regards

    May 24, 2021 at 6:16 pm #295072

    Suleiman91
    Participant

    Thanks Dear, it is working fine

    May 24, 2021 at 8:13 pm #295093

    Elise Noromit
    Member

    You are welcome! If you have any questions please feel free to contact us.

    Best Regards

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)