Question

我正在使用以下HTML代码在我的表单中包含一个select2控件，如下所示。

<select id="element_id" class="select2" style="width:100%">
<option value="e1" >Element 1</option>
<option value="e2" >Element 2</option>
<option value="e3" >Element 3</option>
</select>

我使用以下样式格式化列表项和所选项的字体。

<style>
    #s2id_element_id .select2-container--default .select2-selection--single .select2-selection__rendered 
    {
        color: green ;
    }
</style>

这不会将列表项和所选项目以绿色着色。注意：我只需要这个特定的选择框来拥有样式而不是其他。所以我使用css id选择器进行特定的select2控制。

感谢。

Answer 1

以下是您需要用于样式化select2输入的类列表：

/* Input field */
.select2-selection__rendered {  }

/* Around the search field */
.select2-search {  }

/* Search field */
.select2-search input {  }

/* Each result */
.select2-results {  }

/* Higlighted (hover) result */
.select2-results__option--highlighted {  }

/* Selected option */
.select2-results__option[aria-selected=true] {  }

如果你想要，你可以在我创建的这个JSBin中玩，所以你可以测试一下。

我已经更新了我的JSBin，你可以在其中看到如何设置特定select2列表的样式（而不是全局添加样式）

Answer 2

$consumer_key = "bcd69xxxxxxxxxxxxxxxxxxxxxxx52";
$secret_key = "62fe9xxxxxxxxxxxxxxxxxxxxxxxx54d";

$base = rawurlencode("GET")."&";
    $base .= "http%3A%2F%2Fplatform.fatsecret.com%2Frest%2Fserver.api&";
    $params = "format=json&";
    $params = "method=foods.search&";
    $params .= "oauth_consumer_key=$consumer_key&";
    $params .= "oauth_nonce=".uniqid()."&";
    $params .= "oauth_signature_method=HMAC-SHA1&";
    $params .= "oauth_timestamp=".time()."&";
    $params .= "oauth_version=1.0&";
    $params .= "search_expression=banana";
    $params .= "oauth_callback=oob";
    $params2 = rawurlencode($params);
    $base .= $params2;

//encrypt it!
$sig= base64_encode(hash_hmac('sha1', $base, "62fe9d66898545a0b48d497a4394054d&", true));
    $url = "http://platform.fatsecret.com/rest/server.api?".$params."&oauth_signature=".rawurlencode($sig);
//$food_feed = file_get_contents($url);
list($output,$error,$info) = loadFoods($url);
echo '<pre>';
if($error == 0){
    if($info['http_code'] == '200'){
        echo $output;
        } else {
       die('Status INFO : '.$info['http_code']);
}
}else{
 die('Status ERROR : '.$error);
}
function loadFoods($url)
{

        // create curl resource
        $ch = curl_init();

        // set url
        curl_setopt($ch, CURLOPT_URL, $url);

        //return the transfer as a string
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

        // $output contains the output string
        $output = curl_exec($ch);

        $error = curl_error($ch);

        $info = curl_getinfo($ch);
        // close curl resource to free up system resources
        curl_close($ch);

        return array($output,$error,$info);

}

试试这个css它会正常工作

Answer 3

.select2-container--default .select2-results__option--highlighted[aria-selected] {
   background-color: #5897fb !important;
   color: white;
}

尝试

如何使用css更改select2控件的字体颜色

3 个答案:

以下是您需要用于样式化select2输入的类列表：