Select Size Attribute Size Not Working in Chrome/Safari

Safari and Chrome: problem editing input 'size' attribute on the fly

I doubt that the size attribute would work cross browser. I would switch to setting the maxlength and css width of the input field rather than changing the size attribute.

Looks like a bug/unsupported feature in webkit. Which Safari/Chrome share.

HTML select font-size

You'll need to turn off the default OS styling with: -webkit-appearance: none;
(If you're making a highly-styled dropdown, this is essentially a complete style reset.)

Live Demo

---

You could also try: -webkit-appearance: menulist-button;
(Though I'm not sure how other style effects will affect this one.)

HTML input button css-height not working on Safari and Chrome

Change it from <input> to <button> and add -webkit-appearance: none; to the start of your CSS, eg:

.submitbtn {
    -webkit-appearance: none;
    height: 50px;
    background-color:#FFF;
    color:#666;
    font-weight:bold;
    border: solid #666 1px;
    font-size: 14px;
}

Styling a select box with a size attribute?

Since you're open to use jQuery and since original SELECT doesn't suit your need, I suggest using Selectable from jQueryUI

If this doesn't suit you, Google for others, but search for "listbox" (e.g. "jQuery listbox), you will find alternatives like http://kalnitsky.org/projects/listbox.js/en/.

Most of them won't convert your existing SELECT element into a new one, but there're some that would.

---

Related Topics