I have two types of input. A select dropdown box, and a regular input.
On the input, I have added a padding: 10px; that makes it look big.
The issue is once I put the select box beside it, they are both different heights.
How do I either apply the padding to the select, or make it the same height as the input.
Here is a live example.
Edit 1
This is how it looks to me:
Try adding -webkit-appearance: none at least to the <select> but possibly to both. OSX really wants their controls to look apple-y
Add this attribute to the select element:
-webkit-appearance: menulist-button;
Check this answer for more details: https://stackoverflow.com/a/3075922
Related
I'm trying to use a regular input type date to use on mobile devices. But the width set in the CSS is overruled by Safari (or webkit).
I can add -webkit-appearance: none; to the CSS and by that, the width will work as expected. But then I lose all the other styling that is wanted, for example the arrow to indicate that it is a picker.
Is there a way that I can keep the basic styling of an input type date, but rule over the width myself?
-webkit-appearance: none; does always remove the typical style of a picker... But you can easily add an arrow using CSS and a background-image.
I'm not aware of a way to custom style the input but also keeping the arrow.
Add -webkit-min-logical-width: <your desired value>. It solved the problem for me!
if you want select only input[type='date'] and input[type='time']
try this CSS line.
input[type='date'], input[type='time'] {
-webkit-appearance: none;
}
I have found that to get 100% width correct as per #Boldizsar answer you need a little CSS calc action to remove the width added by the dropdown arrow on iOS.
-webkit-min-logical-width: calc(100% - 16px);
I'm trying to add a downward-pointing chevron (basically a down arrow) from the FontAwesome icon set to a form select box. I've removed the default styling from the select box and added the icon as a pseudo-element after the form. It's working as-intended in a jsFiddle, but not on the site I'm working on.
It seems like the issue may be that the background: transparent; styling on the select isn't working the same on the site as in the fiddle, but I'm not sure why that would be the case. I know I could make the icon visible by increasing the z-index, but then the select dropdown won't show when the icon is clicked (as it does in the fiddle).
Edit: I need to have the dropdown show up when the icon is clicked; this is the case in the fiddle, but doesn't work with a higher z-index on the pseudo-element
Edit 2: Example of accepted solution is in this fiddle; also removed link to production website.
Any thoughts on what's happening here?
Seems as you have 2 different problems - positioning and functionality. Currently your website doesn't display the arrow at all. And even if it did, clicking on the arrow would not open the dropdown list. Simply putting it on top, may work in some browsers, but AFAIK would not be a cross-browser solution.
Per functionality, add 'pointer-events:none' to the arrow alement. This will make sure that it doesn't handle any clicks and they will be propogated to the select elemnt.
Regarding your positioning:
Instead of changing the z-index, simply set the min-width to N pixels and remove the absolute positioning from the arrow.
In CSS selector ordering:after
Remove `position:absoulte;`.
In CSS selector select.orderby
Change width:100%; to min-width: 200px; (or any width you need)
Hope this helps!
You have z-index: -1 on this .woocommerce-ordering:after in your css. Make it 0 or larger than 0 and it works.
for some odd reason the text area I have in my site won't accept the width I tell it to, I've tried to select it three times in the CSS just to make sure!
Here is a jsfiddle example that shows what I want, and here is the page where it doesn't want to work. I have searched through the CSS to find any conflicting textarea properties, but there are none.
Thanks for the help!
Edit: If you have Firebug, don't forget about it, and use it!
In one of your CSS files, you specified textarea { min-width: 40em; }.
You have min-width: 40em for all textarea elements.
I have a form where depending on the website's brand one of two input fields should be visible at one given spot.
I figured I just put both input fields in the same container and then through my stylesheet set one of them to display:none;
This does hide the field, but it still makes it take up space.
I also tried setting the height and width to 0 or setting visibility to hidden or collapse but none of those worked.
Untill now all the branding things could be done with css style sheets so I would like to keep it that way.
The solution should at least be supported in IE6 & up, Firefox 2 & up and Chrome (latest).
why don't you use input type="hidden" ?
What about setting the invisible input field to position: absolute; which should take it out of the rendering flow.
However, setting it to display: none should in theory do the same...
<style>
.hideme
{
display:none;
visibility:hidden;
}
.showme
{
display:inline;
visibility:visible;
}
</style>
<input type="text" name="mytext" class="hideme">
You can either set class="hideme" to hide your control or class="showme" to show your control. You can set this toggeling using JavaScript or server side coding.
This does hide the field, but it still
makes it take up space.
This shouldn't happen; display: none should cause the element to not be included in the flow. Check the rest of your CSS (try using Firebug to figure out where the extra "space", which is probably just padding or margin of some surrounding element, is coming from).
Using the visibility property takes up rendering space even if the element is not visible. Instead of using visivility you have to use display property.
You can set the display to none if you want to hide the element and display to block or inline if you want to show them.
To have a look on display check this
If setting your display property doesn't solve your problem, then I think the textboxes might be absolutely positioned. It might be the reason for the layout not to be changed.
Can you please post the complete code?
You can do this if you want to isolate the css code from other input:
input[type="checkbox"] {
display: none;
}
You can also further isolate it from the same type by indicating another class.
I'm not too familiar with CSS, but you can try implementing JQuery which combines Javascript and CSS to let you do stuff like that with relative ease.
IE seems to ignore the height set in CSS when rendering a HTML SELECT. Are there any work around's for this or do we have to just accept IE will not look as good as other browsers?
There is no work-around for this aside from ditching the select element.
It is correct that there is no work-around for this aside from ditching the select element, but if you only need to show more items in your select list you can simply use the size attribute:
<select multiple="multiple" size="15">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
Doing this you'll have additional empty lines if your collection of items lenght is smaller than size value.
you can use a combination of font-size and line-height to force it to go larger, but obviously only in the situations where you need the font larger too
edit:
Example -> http://www.bse.co.nz EDIT: (this link is no longer relevant)
the select next to the big search box has the following css rules:
#navigation #search .locationDrop {
font-size:2em;
line-height:27px;
display:block;
float:left;
height:27px;
width:200px;
}
Yes, you can.
I was able to set the height of my SELECT to exactly what I wanted in IE8 and 9. The trick is to set the box-sizing property to content-box. Doing so will set the content area of the SELECT to the height, but keep in mind that margin, border and padding values will not be calculated in the width/height of the SELECT, so adjust those values accordingly.
select {
display: block;
padding: 6px 4px;
-moz-box-sizing: content-box;
-webkit-box-sizing:content-box;
box-sizing:content-box;
height: 15px;
}
Here is a working jsFiddle. Would you mind confirming and marking the appropriate answer?
Use a UI library, like jquery or yui, that provides an alternative to the native SELECT element, typically as part of the implementation of a combo box.
Even though setting a CSS height value to the select element does not work, the padding attribute works alright. Setting a top and bottom padding will make your select element look taller.
Finally found in http://viralpatel.net/blogs/2009/09/setting-height-selectbox-combobox-ie.html
a simple solution (at least for IE8):
font-size: 1.0em;
BTW, for Google Chrome, found this workaround at
How to standardize the height of a select box between Chrome and Firefox? */
-webkit-appearance: menulist-button;
There is a work-around for this (at least for multi-select):
set select size attribute to option list size (use JavaScript or set it to any large enough number)
set select max-height instead of height attribute to desired height (tested on IE9)
You can use a replacement: jQuery Chosen. It looks pretty awesome.
select{
*zoom: 1.6;
*font-size: 9px;
}
If you change properties, size of select will change also in IE7.
See also inconsistent box model between input, select, ...
you could do similar to what facebook does, just add padding around. It is not as good as one could wish but looks reasonably well.
Not sure but I think this was a question not about the height of a 'multiple' type of select element but a drop-down type of select element. I have come across times when the drop-down looks squashed and does not show clearly the selected value. Undoubtedly it has to do with CSS style info in use on the page. The only way to stop it is either change the CSS (which would likely affect the whole page or parts of it in ways you don't want affected) or use style info in the select element itself to override the CSS that's clobbering it. Example:
<select name="myselect" id="myselect" style="font-size:15px; height:30px">
<option value="someval">somedescr</option>
...
</select>
Hope this helps.
i wanted to set the height of the select box to be smaller than the default. i used
select {
position: relative;
height: 10px !important;
display: inline-block;
}
this works on ie7 and ie8. you might only need the height property, i just added the position and display to override properties inherited from higher up the dom.