- This topic has 2 replies, 2 voices, and was last updated 10 years, 2 months ago by
.
-
Posts
-
Hi
I’m having a nightmare trying to style the search box properly. the search is located on the Advanced Search page.
When I click into the field – the elements shift upwards, and the styling is all over the place – I’ve added :
input[type=text], textarea, input[type=email], input[type=password], input[type=tel] {
transition: none!important;
}to the css in the Salient Theme General Admin area CSS box, it improves slightly but doesn’t get round my issue – any help would be appreciated
many thanks
GraemeHi!
Well, there are indeed some nasty rules overriding the search input style. This custom CSS seemed to help, when I put it together on the console panel:
[code].proinput input.orig, .proinput input.autocomplete {
padding: 0 !important;
line-height: normal !important;
color: white !important;
border: 0 !important;
font-size: 12px !important;
}[/code]The cause of the problem is the following lines in the ascend.css file:
[code]
.container-wrap input[type="text"], .container-wrap textarea, .container-wrap input[type="email"], .container-wrap input[type="password"], .container-wrap input[type="tel"], .container-wrap input[type="url"], .container-wrap input[type="search"], .container-wrap input[type="date"] {
background-color: transparent!important;
border: 1px solid #ccc!important;
box-shadow: none!important;
-webkit-box-shadow: none!important;
font-size: 16px!important;
-o-box-shadow: none!important;
padding: 16px!important;
}
[/code]This basically forces padding, mfont size, background and a border to the input field. No wonder the search style was overwritten, as these are forced with the !important modifier, which should be avoided, but I guess the developer had a good reason to use it this case.
Anyways, I’m hoping it helps 🙂
- You must be logged in to reply to this topic.