The selection button as shown in the image below is not showing in my css set up for the select option of the website.
http://www.thefixedgearshop.com/nl/frames/aventon-frames/aventon-cordoba-frameset-wit
Select option without the button:
Select option with button:
Button that is missing:
Here is the CSS code for the option:
product-options dd select {
width: 100%;
border: 2px solid #aab2bd;
background-color: #f4f4f4;
width: 100%;
border: 2px solid #aab2bd;
color: #666;
font-size: 13px;
padding: 9px;
border-radius: 3px;
border: 1px solid #999;
-webkit-appearance: none;
cursor: pointer;
A way I've seen custom dropdowns done before is by using the little drop caret as a background-image with a background-position value of whatever puts it in the right place for your design.
Have a look at the pages linked below.
Background-image attribute W3Schools
Background-position attribute W3Schools
Related
Am using Angular 6 App. I want to change the style of ng-multiselect-dropdown. If i override the style using inline,external and internal, it does not affect anything. Only if i change the style in node modules the change effects in UI. But it is not the correct way.How should i achieve this?
style.css
.multiselect-dropdown .dropdown-btn .dropdown-down {
display: inline-block;
top: 10px;
width: 0;
height: 0;
border-top: 5px solid #adadad;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
}
you can use !important to you custom ccs inside style.css file
like:
display: inline-block !important;
second solution you can make component ViewEncapsulation.None
I thing this may work..
Here I am using Oracle ADF.
My button is styled as follows:
af|commandButton:text-only {
background-image: none;
width: auto;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
af|commandButton:text-only:focus {
background-image: none;
width: auto;
outline: none;
height: 30px;
border: 1px solid #c4ced7;
border-radius: 2px;
font-size: 12px;
font-weight: bold;
color: #000000;
text-align: center;
padding: 2px 10px 3px 10px;
}
Removed focus outline using "outline:none;" as specified in the CSS snippet.
Now, focus outline is removed in all browsers except firefox.
As per the diagnosis I found that firefox uses "-moz-focus-inner" to render outline.
I tried the following two ways in CSS but no luck.
First way:
button::-moz-focus-inner {
border: 0;
}
Second way:
af|commandButton:text-only:focus::-moz-focus-inner,
af|commandButton:focus::-moz-focus-inner {
border:0;
}
How to specify styles for "-moz-focus-inner" in ADF ?
I had the same problem with my xul programm. The point was, that there was some shadow DOM hidden in the button, which has the dotted border.
This is how I made it work:
button *, button:focus *
{
border: 0;
}
Keep in mind, that the element within the button has a transparent border when the button is not in the :focus state. Therefor you have either to clear it for both states or just set the border to transparent too at :focus.
Hope that helps you too
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;
}
I've got a selection part where I have multiple font Awesome icons and the selected one has a bar underneath it.
That goes alright as long as I only have 1 row of icons. When I have multiple rows the "selected bar" is not visible anymore as the icon underneath is hiding it.
I'm not very strong in css and tried all the padding and margins I could think of but without much success. In the attached jsfiddle you can see the selector for the last two icons, but not for the first one.
What should I add to the css below so that I can have multiple rows of icons and still see the selector bar?
.icon-picker {
border: 0px solid #000000;
margin-right: 5px;
width: 24px;
height: 24px;
background-color: #FFFFFF;
padding-bottom: 4px;
}
.selected {
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 2px solid #000000;
}
.icon-container {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
padding-left: 15px;
max-width: 300px;
}
Thanks for your time.
jsfiddle
You need to make the <i> tag a block element for the width and height to be applied to the element.
See fiddle
.icon-picker {
border: 0px solid #000000;
display: inline-block;
margin-right: 5px;
width: 24px;
background-color: #FFFFFF;
}
I'm using the combobox control:
http://demos.telerik.com/aspnet-mvc/razor/ComboBox?theme=vista
And I want it to be not white, like it is now. Which css property can do this? Is it possible?
I want it to look like this:
You should be able to achieve that with a custom background color on the select element and some rounded corners on its container. Try placing the combobox in a containing DIV and give it these CSS styles:
.rounded {
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 5px;
background: #333;
}
.rounded select {
width: 100%;
background: #333;
color: #fff;
border: 0;
outline: 0;
}
http://jsfiddle.net/mpHgR/1/
It might be a little off, but it's close to what you want.