Question

我需要一种在html选项标签中使用两种颜色的方法。为此，我写了以下代码：

＆＃13;

public class MainActivity extends AppCompatActivity {

Button answer1, answer2, answer3;
TextView Score, Question;

private Questions mQuestions = new Questions();

private String mAnswer;
private int mScore = 0;
private int mQuestionsLength = mQuestions.mQuestions.length;

Random r;

List<Questions> list;


@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);


    r = new Random();

    answer1 = (Button) findViewById(R.id.answer1);
    answer2 = (Button) findViewById(R.id.answer2);
    answer3 = (Button) findViewById(R.id.answer3);

    Score = (TextView) findViewById(R.id.Score);
    Question = (TextView) findViewById(R.id.Question);

    Score.setText("Score: " + mScore);

    updateQuestion(r.nextInt(mQuestionsLength));

    list= new ArrayList<Questions>();

    Collections.shuffle(list);

    answer1.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (answer1.getText()== mAnswer) {
                mScore++;
                Score.setText("Score: " + mScore);
                updateQuestion(r.nextInt(mQuestionsLength));
            }else {
                gameOver();
             }
        }
    });

    answer2.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (answer2.getText()== mAnswer) {
                mScore++;
                Score.setText("Score: " + mScore);
                updateQuestion(r.nextInt(mQuestionsLength));
            }else {
                gameOver();
            }
        }
    });

    answer3.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (answer3.getText()== mAnswer) {
                mScore++;
                Score.setText("Score: " + mScore);
                updateQuestion(r.nextInt(mQuestionsLength));
            }else {
                gameOver();
            }
        }
    });

}

private void updateQuestion(int num) {
    Question.setText(mQuestions.getQuestion(num));
    answer1.setText(mQuestions.getChoice1(num));
    answer2.setText(mQuestions.getChoice2(num));
    answer3.setText(mQuestions.getChoice3(num));

    mAnswer = mQuestions.getCorrectAnswer(num);
}

＆＃13;

正如您所看到的，颜色样式不起作用。那么有没有办法在选项标签中使用多种颜色？

Answer 1

您可能需要将style attr移动到option元素。同时建议，使用类与内联样式进行重用。

另请注意：输入/选择/复选框等都具有特定于浏览器的样式。在开发多浏览器支持时请记住这一点。

更新1 ：对错过最终目标表示歉意。不幸的是，option元素不能有子元素和样式，因此会失败。

解决此问题的方法是使用标准select元素构建您自己的<div>元素

<div>Some Text<span> - Second Text</span><div>

Example of Custom Select from W3 Schools

.twoTone {
  color: black;
}
.twoTone span {
  color: red;
}

<select>
<!-- Does Not work because options cannot have child elements -->
<option class='twoTone'><span>color red1</span> - default color1</option>
<option><span style="color: red;">color red2</span> - default color2</option>
<option><span style="color: red;">color red3</span> - default color3</option>
</select>

<!-- Works because divs allow child elements -->
<div class='twoTone'><span>Red Text -</span> Black Text </div>

Answer 2

这样的事情应该有效。

<style >
option.red{background-color: red; }
option.blue{background-color: blue;}
</style>

<select name=colors>
<option class="red" >red</option>
<option class="blue">blue</option>
</select>

问题出现了跨度，我认为即使你把内联样式放到它应该工作的选项上，但我从来没有这样做过。

HTML选项标签中的多种颜色（组合框）

2 个答案: