While working on a web app using jQuery locationpicker, I noticed that it's causing some styling issues with the input. Despite being able to adjust properties like width, padding, and border, changing the background requires using jQuery.
Here is the input code:
<input type="text" id="search-text" placeholder="Search:">
The jQuery snippet includes setting the background to transparent:
$('#search-text').css({
background: 'transparent'
}).locationpicker({
location: {latitude: 0, longitude: 0},
inputBinding: {
latitudeInput: $('#lat'),
longitudeInput: $('#lng'),
locationNameInput: $(address)
}, enableAutocomplete: true
});
Interestingly, applying CSS :focus to change the background doesn't work as expected:
#search-text:focus {
background: #FFFFFF;
}
However, modifying the border on focus does take effect:
#search-text:focus {
border: 1px solid #FFFFFF;
}
Any thoughts on why there might be an issue specifically with changing the background style?