css 设置OPTION文本部分的样式

qnzebej0 于 2023-05-19 发布在其他

关注(0)|答案(8)|浏览(305)

我有一个包含几个OPTION元素的SELECT列表。以下是我对选项文本部分进行样式化的简单方法：

<select name="color">
<option value="0">red <span style="font-weight: bold;">SLOW</span></option>
<option value="1">blue <span style="font-weight: bold;">SLOWER</span></option>
<option value="2">green <span style="font-weight: bold;">SLOWEST</span></option>
</select>

这不起作用：浏览器不喜欢OPTION元素中的SPAN元素。
是否有其他方法来样式化OPTION元素的部分文本？

css

来源：https://stackoverflow.com/questions/3354979/styling-part-of-the-option-text

8条答案

按热度按时间

6yt4nkrj1#

但您始终可以创建一个自定义选择框。参考下面的jsFiddle，
JSFiddle for multi colored selectbox options

// Insert a list item into the unordered list for each select option
for (var i = 0; i < numberOfOptions; i++) {
    $('<li />', {
        html: $this.children('option').eq(i).text()
        .split(' ').join(' <span style="color:red">'),
            rel: $this.children('option').eq(i).val()
    }).appendTo($list);
}

赞(0）回复(0）举报 2023-05-19

6za6bjd02#

不。option是以平台原生的方式进行样式化的，只对其中一部分进行样式化是不起作用的。（这通常也不是一个好主意。

赞(0）回复(0）举报 2023-05-19

khbbv19g3#

或者你可以用Bootstrap Drop唐斯加上几行Javascript来做。
下面是Bootstrap示例，稍微做了一些修改，加上一个'lil Javascript：

$(function() {
   $('#my-select').find('li').click(function() {
      $('#selected').html($(this).html());
   });
});

<head>
      <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
    <script class="cssdeck" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Single button -->
<div id='my-select' class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span id="selected">Action</span> <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action <span style='color:red'>like Super Man</span></a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>
</body>

赞(0）回复(0）举报 2023-05-19

hrysbysz4#

虽然你不能在OPTION元素中放置标记，但你可以使用CSS：：BEFORE和/或：：AFTER伪元素，并给予它们不同的样式。例如：

<style>
option::before 
    {content: attr(value) ":"; 
     display:inline-block; padding-right:3px; padding-left:1px;
     font-weight:bold; width:1.6em; text-align:right;}
</style>

<select name=menu multiple size=4>
<option value=1>Hamburger</option>
<option value=2>Cheeseburger</option>
<option value=3>Hot Dog</option>
<option value=4>Fries</option>
</select>

这将为每个OPTION创建一个带有粗体数字的SELECT元素。
注意：我还没有在所有浏览器上尝试过，但它应该可以在所有现代浏览器上工作。

赞(0）回复(0）举报 2023-05-19

siotufzp5#

这更像是对the question closed as a duplicate on other tags的一个解决方案，而不是特别针对 * * 的样式。
如果您不介意使用JavaScript，Select2提供了一种非常简洁的方法来实现这一点。它也使用列表。
这里是HTML

<select id="e1" style="width:300px">
  <option value="AL" data-badge="3">Alabama</option>
  <option value="WY">Wyoming</option>
</select>

这是CoffeeScript

$("#e1").select2
  theme: "bootstrap"
  templateResult: (data) ->
    badge = $(data.element).data('badge')
    if badge
      return $(document.createTextNode(data.text)).add($('<span class="badge pull-right">').text(badge))
    data.text

和here is JSFiddle。

赞(0）回复(0）举报 2023-05-19

eivnm1vs6#

选项标签中允许的内容为文本，可能带有转义字符（如é）。MDN doc for more details

赞(0）回复(0）举报 2023-05-19

but5z9lq7#

你可以使用react js的react-select选项来实现这一点，如下所示。

import { useEffect, useState } from "react";
import Select from "react-select";

function App(props) {
  //const options = compliments;
  const [state, setState] = useState({
    rows: [
      {
        rowId: 0,
        config: ""
      }
    ],
    id: 1
  });
  const [configOpts, setConfigOpts] = useState([]);

  const configstyles = {
    control: (styles, { isFocused, isSelected }) => ({
      ...styles,
      backgroundColor: "white",
      borderColor: isSelected ? "yellow" : "grey"
    }),
    option: (styles, { data, isDisabled, isFocused, isSelected }) => ({
      ...styles,
      width: "auto"
    }),
    singleValue: (styles, { data }) => ({
      ...styles,
      ":before": {
        borderRadius: 10,
        content: data.label === "Test3" ? '"Red"' : '"Green"',
        color: data.label === "Test3" ? "Red" : "Green",
        display: "inline",
        marginRight: 8,
        height: 10,
        width: 10
      }
    }),
    menu: (styles) => ({
      ...styles,
      width: "max-content",
      minWidth: "100%"
    })
    // Input: (styles) => ({ ...styles, width: "auto" })
  };

  const handleAddRow = () => {
    const newRow = {
      rowId: state.id,
      config: ""
    };
    setState({
      ...state,
      rows: [...state.rows, newRow],
      id: state.id + 1
    });
  };

  const handleRemoveRow = (idx) => () => {
    const rows = state.rows.filter((FilterdRow) => FilterdRow.rowId !== idx);
    console.log("rows", rows);

    setState({
      ...state,
      rows
    });
  };

  const handleConfigChange = (index) => (selectedOption) => {
    console.log("SelectedOption: " + selectedOption.label);
    const rows = state.rows.map((row) => {
      if (row.id === index) {
        return {
          ...row,
          ["config"]: selectedOption.label
        };
      }
      return row;
    });
    setState({
      ...state,
      rows
    });
  };

  useEffect(() => {
    setConfigOpts([
      { label: "Test11111111111111111111111111", value: "Test1" },
      { label: "Test2", value: "Test2" },
      { label: "Test3", value: "Test3" },
      { label: "Test4", value: "Test4" }
    ]);
  }, []);

  return (
    <>
      <table>
        {state.rows.map((item, idx) => (
          <tr key={item.rowId}>
            <td>
              <Select
                options={configOpts}
                onChange={handleConfigChange(item.rowId)}
                styles={configstyles}
              />
            </td>
            <td>
              <button onClick={handleRemoveRow(item.rowId)}>Remove</button>
            </td>
          </tr>
        ))}
      </table>
      <div>
        <button onClick={handleAddRow}>Add</button>
      </div>
    </>
  );
}

export default App;

CodeSandbox

赞(0）回复(0）举报 2023-05-19

atmip9wb8#

在某些情况下，我可以通过jQuery来实现。标签：http://jsfiddle.net/rangine/wegx00La/4/
我使用了一个选择框来选择 Bootstrap 形式的字形图标。但不幸的是，这只适用于Firefox。（我没有在所有浏览器上测试它。）在Chrome不工作，在IE！* 我把它扔了 *
Html：

This code Only works in Firefox.
<br/>
<select id="myselect">
  <option value="_none"> - Select One - </option>
  <option value="asterisk">asterisk</option>
  <option value="plus">plus</option>
  <option value="euro" class="red">euro</option>
  <option value="eur">eur</option>
  <option value="minus" class="green">minus</option>
  <option value="cloud">cloud</option>
  <option value="envelope">envelope</option>
  <option value="pencil">pencil</option>
  <option value="glass">glass</option>
  <option value="music">music</option>
  <option value="search">search</option>
  <option value="heart">heart</option>
  <option value="star">star</option>
  <option value="star-empty">star-empty</option>
  <option value="user">user</option>
  <option value="film">film</option>
</select>
<span class="preview"> </span>

jquery：

(function($) {
  $(document).ready(function() {
    $('#myselect option').each(function() {
      $(this).html('<i class="glyphicon glyphicon-' + $(this).text() + '"></i> ' + $(this).text());
    })

  });
  $('.preview').html(' <i class="preview glyphicon glyphicon-' + $('#myselect').val() + '"></i>');
  $('#myselect').change(function() {
    $('.preview').html(' <i class="preview glyphicon glyphicon-' + $('#myselect').val() + '"></i>');

  });

})(jQuery);

一些CSS：

#myselect {
  margin: 40px;
  height: 30px;
  font-size: 14pt;
}

option.red {
  color: red;
}

option.green {
  color: green;
}

.preview {
  font-size: 20pt;
}

赞(0）回复(0）举报 2023-05-19

我来回答

css 设置OPTION文本部分的样式

8条答案

相关问题

热门标签

最新问答