it-swarm.asia

كيفية تغيير لون نص خيار التحديد الأول

لدي عنصر تحديد يحتوي على عدة عناصر. أريد تغيير لون العنصر الأول. ولكن يبدو أن اللون يظهر فقط عند النقر فوق القائمة المنسدلة المحددة. ما أريد هو تغيير اللون (مثل اللون الرمادي) عند تحميل الصفحة حتى يتمكن المستخدمون من رؤية تغيير لون الخيار الأول.

انظر المثال هنا ... http://jsbin.com/acucan/4/

شكرا على الاجابة! إنها المرة الأولى التي أنشر فيها السؤال هنا. اعتذر للغتي الإنجليزية. آمل أن أوضح السؤال.

شكر

20
konekoya

ماذا عن هذا:

select{
  width: 150px;
  height: 30px;
  padding: 5px;
  color: green;
}
select option { color: black; }
select option:first-child{
  color: green;
}

http://jsbin.com/acucan/9

20
jzm

إذا كان العنصر الأول سيستخدم كعنصر نائب (قيمة فارغة) وكان تحديدك هو required ، فيمكنك استخدام فئة :invalid الزائفة لاستهدافه.

select {
  -webkit-appearance: menulist-button;
  color: black;
}

select:invalid {
  color: green;
}
<select required>
  <option value="">Item1</option>
  <option value="Item2">Item2</option>
  <option value="Item3">Item3</option>
</select>
6
Oscar Barrett

يمكنك القيام بذلك باستخدام CSS: JSFiddle

HTML:

<select>
    <option>Text 1</option>
    <option>Text 2</option>
    <option>Text 3</option>
</select>

CSS:

select option:first-child { color:red; }

أو إذا كنت بحاجة تمامًا إلى استخدام جافا سكريبت (لا تنصح بهذا): JSFiddle

جافا سكريبت:

$(function() {
    $("select option:first-child").addClass("highlight");
});

CSS:

.highlight { color:red; }
1
glautrou

كنت أرغب حقًا في هذا (يجب أن يبدو العناصر النائبة متماثلة في مربعات النص كمربعات تحديد!) وأن CSS الثابت لا يعمل في Chrome. إليكم ما فعلت:

تأكد أولاً من أن علامة التحديد تحتوي على فئة .has-Prompt.

ثم تهيئة هذه الفئة في مكان ما في document.ready.

# Adds a class to select boxes that have Prompt currently selected.
# Allows for placeholder-like styling.
# Looks for has-Prompt class on select tag.
Mess.Views.SelectPromptStyler = Backbone.View.extend
  el: 'body'

  initialize: ->
    @$('select.has-Prompt').trigger('change')

  events:
    'change select.has-Prompt': 'changed'

  changed: (e) ->
    select = @$(e.currentTarget)
    if select.find('option').first().is(':selected')
      select.addClass('Prompt-selected')
    else
      select.removeClass('Prompt-selected')

ثم في CSS:

select.Prompt-selected {
  color: $placeholder-color;
}
1
smoyth

إليك طريقة بحيث تتحول إلى اللون الأسود عند تحديد خيار ما. عندما تقوم بتغييره مرة أخرى إلى العنصر النائب ، فإنه يعود إلى لون العنصر النائب (في هذه الحالة أحمر).

http://jsfiddle.net/wFP44/166/

يتطلب خيارات أن يكون لها قيم.

$('select').on('change', function() {
  if ($(this).val()) {
return $(this).css('color', 'black');
  } else {
return $(this).css('color', 'red');
  }
});
select{
  color: red;
}
select option { color: black; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="">Pick one...</option>
<option value="test1">Test 1</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
</select>
0
Chloe