I'm creating a custom select menu for a form which uses a background image as a downward arrow button. I achieve this effect with this CSS:
.calculator_select select {
background: url(../img/arrow.png) no-repeat right 65px top -3px #95957A;
overflow: hidden;
width: 110%;
padding: 5px;
line-height: 1;
border: 0;
border-radius: 0;
height: 25px;
-webkit-appearance: none;
color: white;
padding-left: 25px;
position: relative;
}
.calculator_select select:focus {
background: url(../img/arrow-flipped.png) no-repeat right 65px top -1px #95957A;
}
This works almost perfectly except that the CSS remains in the focused state once an option has been selected and only returns to the first state when the user focuses on another element. Is there some way around this? i.e. CSS is only in the second state when the menu is open? Thanks!
For slaps and giggles, I took a shot and came up with an inelegant solution - FIDDLE.
In this code, you determine which of your ul elements will give a dropdown, and use that element definition to trigger a mouseover/mouseout sequence.
JS
$
( 'nav ul li:nth-child(2)' ).mouseover(function(){
$('.statusdiv').css('background-color', 'green');
});
$( 'nav ul li:nth-child(2)' ).mouseout(function(){
$('.statusdiv').css('background-color', 'red');
});
Again, more of a brute-force approach, but perhaps it will give others some ideas to make it better.
Related
Basic css question here.
Every time I press "Check all", the button populates with the names from a list (which is fine).
The issue is: The button width itself expands and gets bigger. I want to keep it fixed. Furthermore, how can I set a limit to the number of list items it can show? So for example, if there are a lot of items, after "test 5", a "..." should appear.
By the way: this is all in my custom.css, .btn-default is actually from bootstrap, but I wanted to change some things in my multi select-class. I changed caret margin because the caret was right beside the text, I wanted it to be to the VERY right, maybe that's what's messing everything up??
custom.css :
.sv-manage-multiselect-dropdown {
.btn-default {
background-image: none;
border: 1px solid #ADA9A9;
padding: 6px 8px 1px 8px ;
}
.btn .caret {
margin-left: 160px;
margin-bottom:5px;
}
}
Html:
<td class="col-xs-2">
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="Mylist.names"
options="Names.name for link in Mylist"
multiple="true"
ms-selected="{{Mylist.names}}"
</am-multiselect>
</td>
Before:
After:
Have you tried using max-width in your css?
max-width: 40px;
For example.
Hope this helps!
I looked in angular-multiselect/src/multiselect.tmpl.html, adding this css should work, 10px is just for the example, put width and height of the checkmark, like this <i> will fill same place even if it's void:
.sv-manage-multiselect-dropdown {
ul.dropdown-menu > li > i{
display: inline-block;
min-width: 10px;
min-height: 10px;
}
}
I'm trying to make an HTML search form similar to Amazon's. I created the desired look, but when I went to actually try the search the text box wasn't taking any input. At first I thought the text was white or something but after clicking the search button I realized this was not the case. I have tried using Chrome's Inspect Element to see the problem and when I hovered over the input box code, the input box was showing beneath the code.
Here's the JSFiddle.
This is the CSS for the box but I don't see an issue here:
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}
#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}
I'm not sure whether the other elements are interfering or if something is wrong with the search box. How do I fix this issue?
Add float left to .select-style:
.select-style {
...
float: left;
...
}
Lower the width of #search-box input[type="text"]. 80% seems good:
#search-box input[type="text"] {
width: 80%;
...
}
I'm trying to create a fancy button hover state for the default button in Bootstrap 3. Basically, the button starts out with 4px of border-bottom and when hovered this reduces to 2px. Because of this, I compensate with top: 2px on the button.
This works fine, however it's affecting other elements which I don't want it to do. For example, it pulls the paragraph beneath it up. Here's a JSFiddle example:
http://jsfiddle.net/kD6dQ/
You can see when you hover over the button the paragraph below changes position. How do I stop that?
I've tested this in the latest versions of Chrome and Firefox.
You used top for your element. When changed to margin-top it works.
fiddle
css:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
margin-top: 2px;
}
Try this for the hover declaration:
.btn-default:hover {
background: #eba22b;
color: white;
border-bottom: 2px solid #db9016;
top: 2px;
margin-bottom: 2px;
}
Check this fiddle: http://jsfiddle.net/kD6dQ/1/
The best way to solve this is to simply add height to .btn-default
E.G: height: 35px;
DEMO HERE
Got a nice menu with rounded buttons, and I want to style the dropdown list the same way. Tried a lot of different things but there is two things I need some help with:
1. rounded corners like the rest of the buttons.
2. get a solid color, and not that animated look.
Here is a picture showing the buttons and the dropdown:
Here is the styling on the list:
#topNav .right #categoryButton {
margin-top:5px;
border:3px solid #fff;
background-color:#303030 ;
text-transform:uppercase;
color: #fff;
height:50px;
width:220px;
outline: none;
}
Check out this great article about styling a select dropdown. There are limitations however and some older browsers will render the select box its own way.
It basically involves wrapping the select in a div and styling the div:
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(new_arrow.png) no-repeat right #ddd;
border: 1px solid #ccc;
}
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
You can't do that. You have to build your own select element.
From this article discussing "What if you want complete design control?"
First, try everything you
can to make that not necessary. Default form elements are familiar and
work well. Making a dropdown menu match the font and colors of your
brand isn't usually necessary and is more likely obnoxious at best and
bad UX at worst.
If you decide that it's absolutely a good idea to customize a
dropdown, then you should use JavaScript to:
Accessibly hide the original select.
Rebuild the select with custom
markup (probably a definition list), that you style how you want.
Replicate all the functionality that default selects have, which
include: keyboard events like up and down arrow keys and return to
select, scrolling of long lists, opening the menu upwards when select
is against bottom of screen, to name a few.
There's a few more steps to accommodate different client setups and a tutorial linked for more information.
Whenever I'm using this in CSS (which is important to me) :
.button:active {
position: relative;
top: 2px;
left:2px;
}
Buttons don't want to function on particular areas depending where you click on them. (positions do happen but jQuery doesn't start)
Here is the DEMO
You'll see that sometimes they don't react depending if you hit the right spot. Its a little bit harder to notice because it happens. For example, try hitting the contact button just a little bit bellow the letter A. Or hit the About button just below the O letter.
When I delete the :active function buttons work normally. How can I fix this?
I changed the height on all the buttons to 100% and it eliminated the problem on my browser. I am using Chrome. Here is what i did.
#btnhome {
margin-left: 121px;
width: 84px;
**height: 100%;**
background-color: black;
border: none;
color: white;
font-size: 14px;
font-weight: 700;
}