css option,选择选项Css(Select Option Css)

选择选项Css(Select Option Css)

我有一个简单的下拉选择选项 - 下面的例子

Volvo

Saab

Mercedes

Audi

当鼠标悬停在沃尔沃上方时会弹出一种类型的工具提示 - 但希望它更大并且看起来更快。

有没有解决方案 - 也许是CSS。

I have a simple dropdown select option - example below

Volvo

Saab

Mercedes

Audi

When hover over Volvo a type of ToolTip pops up - but would like it larger and appear quicker.

Is there a solution to this - maybe css.

原文：https://stackoverflow.com/questions/42520291

更新时间：2020-02-21 21:23

最满意答案

我怀疑这正是你想要的，但这是朝这个方向迈出的一步。 正如@Evochrome所提到的，很难设计原生select元素的样式。 在其上设置title属性的样式更加困难。

为了设置select元素的样式，您需要添加一个size属性。 这会产生将select变为列表而不是下拉列表的潜在不良影响。 不幸的是这是必需的。

从那里我们可以通过创建:after伪元素并将content设置为title属性来设置title样式，使用option[title]:hover:after selector。 这允许您为标题属性设置样式的一些选项，但您仍然有限。

div {

position: relative;

}

select {

width: 100px;

}

option[title]:hover:after {

content: attr(title);

position: absolute;

display: block;

left: 110px;

top: 0;

font-size: 24px;

font-style: italic;

border: 2px solid #000000;

}

Volvo

Saab

Mercedes

Audi

I doubt this is exactly what you want, but it is a step in that direction. As @Evochrome mentioned, it's difficult to style native select elements. Styling the title attribute on top of that is even more difficult.

In order to style the select element you need to add a size attribute. This creates a potentially undesired effect of turning the select into a list instead of a dropdown. Unfortunately this is required.

From there we can style the title by creating an :after pseudo-element with the content set to the title attribute, using the option[title]:hover:after selector. This allows you some options for styling the title attribute but you're still limited.

div {

position: relative;

}

select {

width: 100px;

}

option[title]:hover:after {

content: attr(title);

position: absolute;

display: block;

left: 110px;

top: 0;

font-size: 24px;

font-style: italic;

border: 2px solid #000000;

}

Volvo

Saab

Mercedes

Audi

相关问答

可以使用jQuery： $("select option").each(function(i, element) {

$(element).attr('title', $(element).val());

});

将它包装在document.ready ，您就可以开始了！ 这是一个演示： jsfiddle.net It's possible using jQuery: $("select option").each(function(i, element) {

$(element).

...

尝试使用： -webkit-appearance: none;

-moz-appearance: none;

他们将删除select选项的默认行为。 小提琴 try using: -webkit-appearance: none;

-moz-appearance: none;

They will remove the default behavior of select option. Fiddle

使用"" ： [value="before"] 如果你想隐藏它，请从Before date select remove selected="" Before date option[value="before"]{

display:none;

}

...

尝试改变CSS(替换下面的CSS) .select.select-theme-default {

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

-o-user-select: none;

user-select: none;

position: relative;

z-index: 99;

}

或者你可以覆盖它 位置：相对; z-index

...

通常来说，修改元素非常难以理解。 这是因为它们由操作系统控制，而不是由浏览器控制。 你可以让他们在一个操作系统上的一个浏览器中做一件事，但我可以告诉你，它在不同的浏览器或不同的操作系统上看起来不一样。 你刚刚展开的一些事情无法改变。 唯一的好解决方案是使用基于库的JS选择框，或者自己创建一个。 Typically speaking, modifying elements is finnicky and very difficult to do. This is b

...

如果要在文档中的所有select元素上设置相同的宽度，可以编写例如

select { width: 5.5em }

在head 。 如果您希望仅对某些select元素执行此操作，则需要通过更严格的内容替换选择器select ，例如select.foo将效果限制为具有class=foo属性的select元素。 这很棘手，因为您需要一个足以满足所有选项的宽度，并且您可能希望尽可能接近最大宽度。 选项的宽度取决于文本和字体。 (使用px会让事情变得更糟。那么事情也会取

...

使用CSS： #countrySelect {

text-transform:uppercase;

}

CSS解决方案更好，因为浏览器可以为您完成所有工作。 Use CSS: #countrySelect {

text-transform:uppercase;

}

A CSS solution is better because the browser does all the work for you.

我想你应该试试这个：

.productsize li{

float: left;

padding: 13px;

border: 1px black solid;

text-align: center;

margin-left: 20px;

border-radius: 21px;

cursor:pointer;

}

.productsize{

list-style-type:none;

}

.active{

background-color:grey;

}

...

我怀疑这正是你想要的，但这是朝这个方向迈出的一步。 正如@Evochrome所提到的，很难设计原生select元素的样式。 在其上设置title属性的样式更加困难。 为了设置select元素的样式，您需要添加一个size属性。 这会产生将select变为列表而不是下拉列表的潜在不良影响。 不幸的是这是必需的。 从那里我们可以通过创建:after伪元素并将content设置为title属性来设置title样式，使用option[title]:hover:after selector。 这允许您为标题

...

检查.children("option").length 。 $(document).ready(function() {

$(".page-store select.form-select").each(function() {

if ($(this).children("option").length === 1) {

$(this).addClass("one-option-only");

}

});

});

Check .children("optio

...