Question

我有很多意志力但很难实现它们。这是其中之一。我有一个名为caption的输入表单：

<input id="caption" type="text" name="caption" placeholder="Caption" maxlength="30"/>

我使用.onkeyup来显示caption输入的值：

<!-- This code showing "caption" value -->
<span id="print" class="date-container"></span>

现在，我想使用caption标记更改select option的字体：

<select id="font" name="font">
   <option value="kalam" selected="selected">Kalam</option>
   <option value="handlee">Handlee</option>
   <option value="pacifico">Pacifico</option>
</select>

我的问题是，如何更改font-family取决于所选的选项值？

示例：我在input caption field上输入值并自动显示在date-container，然后我想在select option中将默认字体更改为另一种字体。但保持caption显示，所以它只是更改字体系列。谢谢！

Answer 1

需要js或jquery：

<script>
   $('#font').change(function(){
     $('#caption').css('font-family', $('#font').val());
   });
</script>

在页面上添加jquery文件，在<head>标记中添加：

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

并在选择和文本框之后处理我的代码。

Answer 2

有一个checked CSS伪选择器。

＆＃13;

option:checked {
    font-family: fantasy;
}

option {
    font-family: sans-serif;
}

＆＃13;

<select>
    <option>Cat</option>
    <option>Dog</option>
</select>

＆＃13;

更改字体取决于选择选项标记

2 个答案: