Question

我正在尝试更改第一个选择的颜色，让剩下的选择选项保留为黑色的继承颜色。

然而，我无法继续下去。目前;所有颜色都在#ccc中。我希望第一个禁用的选项是#ccc，其余的选择是继承颜色。

这是HTML：

<select class="form-control select form__blank">
  <option disabled selected value> - select - </option>
  <option>Full Furnished</option>
  <option>Semi Furnished</option>
  <option>UnFurnished</option>
</select>

CSS：

.form-control {
  border-radius: 25px;
  border: 1px solid #323a56;
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
}
.select {
  border-radius: 25px;
  border: 1px solid #323a56;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: right 50%;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
  height: inherit;
}
.form__blank:first-child {
  color: #ccc;
}

JSFIDDLE：https://jsfiddle.net/v9gasouf/

希望它有意义。

Answer 1

主要问题就是样式<table class="table"> <tr> <th>Order Number</th> <th>Name</th> <th>Tel</th> <th>Email</th> <th>Status</th> <th>Order date</th> <th>IS in store?</th> </tr> <tr v-for="order in orders" class="order-row"> <td @click="orderRedirect(order)" style="cursor: pointer">{{order.number}}</td> <td @click="orderRedirect(order)" style="cursor: pointer">{{order.client_name}}</td> <td @click="orderRedirect(order)" style="cursor: pointer">{{order.phone}}</td> <td @click="orderRedirect(order)" style="cursor: pointer">{{order.email}}</td> <td @click="orderRedirect(order)" style="cursor: pointer">{{order.actual_status}}</td> <td @click="orderRedirect(order)" style="cursor: pointer">{{order.order_date}}</td> <td><input type="checkbox"></td> </tr> </table> / options这是一项非常困难的任务，因为每个浏览器的行为都不同或者使用不同的方式来显示它们。

你有一个StackOverflow question有一个很好的解释原因和很多可能的解决方法。

对于Chrome v.57.0.2987，您可以使用CSS选择器：select并完成工作：

select option:disabled

.form-control {
  border-radius: 25px;
  border: 1px solid #323a56;
  width: 100%;
  padding: 10px 15px;
  font-size: 14px;
}
.select {
  border-radius: 25px;
  border: 1px solid #323a56;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-position: right 50%;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
  height: inherit;
}
.form__blank select option:disabled {
  color: #ccc;
}

Answer 2

你不应该

.form__blank option:first-child {
   color: #ccc;
}

但是：

 /**
 * Returns a String representing the path name of the jar and therefore the
 * base locations of the application for supporting files.
 *
 * @return String representing the base location of the application.
 */
public static String getPathName() {
    String fullPath = "";
    int endOfPath = 0;
    try {
        fullPath = new File(JOTI_App.class.getProtectionDomain().getCodeSource().getLocation().toURI().getPath()).toString();
        endOfPath = fullPath.lastIndexOf(File.separatorChar);
    } catch (URISyntaxException ex) {
        Logger.getLogger(Utils.class.getName()).log(Level.SEVERE, null, ex);
    }
    return fullPath.substring(0, endOfPath);
}

Answer 3

选择第一个选项子项而不是选择。

option:first-child {
 color: #ccc;
}

Answer 4

而不是样式:first-child您可以使用[disabled]属性

进行样式设置

select option:disabled{
  color:red;
}

您还可以查看以下小提琴示例。

https://jsfiddle.net/achuakshuu/e97nqLuh/

Answer 5

试试这个

self.dataView = [MySection(sectionId: "all data", data: self.data)]

JS（JQuery的）

self.dataView = self.data.reduce([]) { dataView, datum in
    var dataView = dataView // make a mutable data view

    let sectionId = self.determineSectionIdFromDatum(datum) // <-- slotting into sections

    // Add into an existing section or into a new section
    if let index = dataView.index(where: { $0.sectionId == sectionId }) {
        let data = dataView[index].data + [datum]
        dataView[index] = MySection(sectionId: sectionId, data: data)
    } else {
        let data = [datum]
        dataView.append(MySection(sectionId: sectionId, data: data))
    }

    return dataView
}

或

<select id="selid" class="form-control select form__blank">
.....
</select>

在下拉菜单中更改第一个选定选项的颜色

5 个答案: