I would like your help in solving the following problem. We have a website with a language change menu, as follows: In the HTML file: <select id="mbPOCControlsLangDrop"></select>
The script.js contains the translations. And in the style.css file, this is the formatting of the menu:
#mbPOCControlsLangDrop{
font-family: 'Poppins';
font-size: 0.75rem;
pound-weight: 600;
position:fixed;
top: 10px;
right:10px;
z-index: 999;
border-radius: 0px;
border-width: thin;
opacity: 1;
color: #000000;
border-color: #ffffffffe;
border-width: 0;
background-color: #ffffff !important;
The background color and transparency of the first row of the menu can be changed, but transparent colors cannot be set for the drop-down section, because then the background will always be white and solid.
Related
I'm using Contact Form 7 on a website of a client, and I styled the dropdown menu to this:
.wpcf7-form select {
-webkit-appearance: textfield;
color: #72858a;
font-size: 0.7777777778rem;
background-color: #e9edf0;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
}
Unfortunately the arrows are missing now. Is there anyway to add an down arrow at the right side of the dropdown menu in the same color as the text? I tried different css classes found on this website, but nothing seems to work.
Image of how it displays now:
And how it should be:
The arrow could also be another arrow.
Any help would be appreciated much!
Regards,
Vasco
Here's an option for you... now... I used the span.wpcf7-form-control-wrap that was specifically around the select I was styling. You could also (instead) wrap the selects in a custom div.
This produced this result for me
I also made the triangle using clip-path, so you can change the colors or anything else.
/* Using the menu-813 which for me was the span around the select.*/
span.wpcf7-form-control-wrap.menu-813 {
position: relative;
height: 60px;
background: #e9edf0;
display: inline-block;
}
span.wpcf7-form-control-wrap.menu-813:after {
content: '';
position:absolute;
width: 15px;
height: 15px;
background: #000;
right:8px;
top: 20px;
z-index: 0;
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
.wpcf7-form select {
-webkit-appearance: none;
appearance: none;
color: #72858a;
font-size: 0.7777777778rem;
background-color: transparent;
border-color: #e9edf0;
padding-top: 5px;
padding-bottom: 5px;
width: 300px;
z-index: 1;
position: relative;
padding-left: 2ch;
}
I'm trying to duplicate a certain way to display my post filter buttons -- in a row, with a bottom border, with the border changing color and size when item is selected.
Right now my line appears to not line up between active and not active elements. I also need to understand how to do a transition between the two.
My current display (scroll down to "colombia posts":
https://theslowroad.org/category/destinations/south-america/colombia/
My desired results (produced by a plugin):
https://theslowroad.org/27895-2/
My current CSS:
text-transform: uppercase;
font-size: 21px;
font-weight: 600;
background: #ffffff;
font-family: lato;
line-height: 30px;
padding-bottom: 2px;
padding-right: 20px;
padding-left: 20px;
border-bottom: solid #c8c8c8;
border-bottom-width: 0.5px;
transition-duration: 0.3s, 0.3s, 0.3s, 0.3s;
and on hover/active:
background: #ffffff;
color: #bf593a;
border-bottom: solid #bf593a;
border-bottom-width: 4px;
Can anyone lend a hand? I'm very new at this!
Edited to add:
It appears that the issue with the grey and orange borders not lining up depending on screen size. ??
I know this is a simple thing, but I've tried everything (including googling and even hiring another programmer for an hour) and can't seem to make this work. The theme I'm working with has a specific color on the wordpress search box submit button, and I just need to change the color.
Looking at it with google development tools, the css looks like this:
.search-button, .submit_btn {
background-color: #ffa025;
background-image: -webkit-linear-gradient(#ffa025 0%,#dc7214 100%);
background-image: linear-gradient(#ffa025 0%,#dc7214 100%);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-style: solid;
border-width: 1px;
border-color: #f7b559 #e67e22 #e67e22 #e67e22;
color: #fff;
font-family: FontAwesome;
float: left;
height: 45px;
width: 16%;
}
screenshot of style from google dev tools
What I'd like to do is just turn off the background-image attributes with the gradient and have the background color just be red. I've tried using the above selector, and then tried the selector: .search-button sBn, and put the code into the additional CSS field for theme. Nothing's working. Thanks for any help
As you have identified, the linear gradient set in background-image is overriding the background-color style. To reset the background-image to allow the background-color property be used instead, do the following:
background-image: none;
This will then reset the background colour to the background-color set in the theme css (i.e. #ffa025).
Now to change the color, you can set the background-color to whatever you want, e.g.
background-color: #ffa025;
You could also just use the background property, but that could have knock-on effects for other rules you have set up, so I'd suggest overriding the existing properties.
Working snippet:
/* THEME CSS */
.search-button, .submit_btn {
background-color: #ffa025;
background-image: -webkit-linear-gradient(#ffa025 0%,#dc7214 100%);
background-image: linear-gradient(#ffa025 0%,#dc7214 100%);
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-style: solid;
border-width: 1px;
border-color: #f7b559 #e67e22 #e67e22 #e67e22;
color: #fff;
font-family: FontAwesome;
float: left;
height: 45px;
width: 16%;
}
/* YOUR CSS TO OVERRIDE THEME */
.search-button, .submit_btn {
/* remove the gradient */
background-image: none;
/* change the background colour to red */
background-color: #ff0000;
}
<button type="submit" class="search-button">Search</button>
Finally, don't forget to make sure that either your custom CSS is loaded after the theme CSS, or it uses a more specific selector than the theme CSS e.g.
.search-button.sBn {background-color: #ffa025;}
(FYI, what you are trying to do is quite trivial so I'd be very concerned about the programmer you hired - this should have taken them no more than a couple of minutes)
How do I change the blue highlight on this dropdown please?
link to select box demo
I'd like to change the highlight color to gray if this is possible.
select {
border: 0;
color: #EEE;
background: transparent;
font-size: 20px;
font-weight: bold;
padding: 2px 10px;
width: 378px;
*width: 350px;
*background: #58B14C;
-webkit-appearance: none;
}
#mainselection {
overflow: hidden;
width: 350px;
-moz-border-radius: 9px 9px 9px 9px;
-webkit-border-radius: 9px 9px 9px 9px;
border-radius: 9px 9px 9px 9px;
box-shadow: 1px 1px 11px #330033;
background: url("http://www.danielneumann.com/wp-content/uploads/2011/01/arrow.gif") no-repeat scroll 319px 5px #58B14C;
}
<div id="mainselection">
<select>
<option>Select an Option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
Yes, you could change the background of select but you will not be able to change the highlight color (when you hover) by using CSS!
You have few options:
Is to convert select into ul, li kind of select and do anything you want with this.
Use libraries like Choosen, Select2 or jQuery Form Styler . These allow you to style in much more broad and cross-browser way.
I believe you are looking for the outline CSS property (in conjunction with active and hover psuedo attributes):
/* turn it off completely */
select:active, select:hover {
outline: none
}
/* make it red instead (with with same width and style) */
select:active, select:hover {
outline-color: red
}
Full details of outline, outline-color, outline-style, and outline-width
https://developer.mozilla.org/en-US/docs/Web/CSS/outline
Just found this whilst looking for a solution. I've only tested it FF 32.0.3
box-shadow: 0 0 10px 100px #fff inset;
try this.. I know it's an old post but it might help somebody
select option:hover,
select option:focus,
select option:active {
background: linear-gradient(#000000, #000000);
background-color: #000000 !important; /* for IE */
color: #ffed00 !important;
}
select option:checked {
background: linear-gradient(#d6d6d6, #d6d6d6);
background-color: #d6d6d6 !important; /* for IE */
color: #000000 !important;
}
When we click on an "input" element, it gets "focused" on. Removing the blue highlighter for this "focus" action is as simple as below. To give it gray color, you could define a gray border.
select:focus{
border-color: gray;
outline:none;
}
This works for firefox and chrome, falls back gracefully to the system color in IE. Just be sure to set the title property to the content of the option. It allows you to set the background and foreground colors.
select option:checked:after {
content: attr(title);
background: #666;
color: #fff;
position: absolute;
width: 100%;
left: 0;
border: none;
}
To both style the hover color and avoid the OS default color in Firefox, you need to add a box-shadow to both the select option and select option:hover declarations, setting the color of the box-shadow on "select option" to the menu background color.
select option {
background: #f00;
color: #fff;
box-shadow: inset 20px 20px #f00
}
select option:hover {
color: #000;
box-shadow: inset 20px 20px #00f;
}
i just found this site that give a cool themes for the select box
http://gregfranko.com/jquery.selectBoxIt.js/
and you can try this themes if your problem with the overall look
blue - yellow - grey
Add this in your CSS code and change the red background-color with a color of your choice:
.dropdown-menu>.active>a {color:black; background-color:red;}
.dropdown-menu>.active>a:focus {color:black; background-color:red;}
.dropdown-menu>.active>a:hover {color:black; background-color:red;}
I have a lot of forms on my website with, of course, many of the fields in them being required. If required field is left empty, it is assigned an 'error' class and I'm trying to circle the field in red regardless whether it is a text field, drop down menu or a checkbox.
I have the following code in my css file:
.error input, .error select, .error textarea {
border-style: solid;
border-color: #c00;
border-width: 2px;
}
Now strangely enough that works well in IE but in Chrome the checkboxes are not circled in red although I can see that the CSS is applied to them when inspecting the element.
And this might be irrelevant at the css code above is active but I do have something else in my css file:
input[type=checkbox] {
background:transparent;
border:0;
margin-top: 2px;
}
And that is used so that the checkboxes are displayed correctly in IE8 and less.
Any ideas how I can visualize the red border in Chrome?
EDIT:
Here's a jsfiddle:
http://jsfiddle.net/PCD6f/3/
Just do it like so (your selectors were wrong: .error input, .error select, .error textarea):
input[type=checkbox] {
outline: 2px solid #F00;
}
Here's the jsFiddle
Specifically for a checkbox use outline: 2px solid #F00;, BUT keep in mind that the border will still be visible. Styling input fields to look them well across multiple browsers is tricky and unreliable.
For a completely custom styled checkbox, see this jsFiddle from this Gist.
EDIT Play with: outline-offset: 10px;
Check Box, and Radio Button CSS Styling Border without any image or content. Just pure css.
JSFiddle Link here
input[type="radio"]:checked:before {
display: block;
height: 0.4em;
width: 0.4em;
position: relative;
left: 0.4em;
top: 0.4em;
background: #fff;
border-radius: 100%;
content: '';
}
/* checkbox checked */
input[type="checkbox"]:checked:before {
content: '';
display: block;
width: 4px;
height: 8px;
border: solid #fff;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: 4px;
margin-top: 1px;
}
Works for me.only outline doesn't work.
input[type=checkbox].has-error{
outline: 1px solid red !important;
}