更改字体取决于 select 选项标签

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>

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

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

我的问题是，如何根据所选选项值更改字体系列？

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

Answer 1

有一个checkedCSS伪选择器。

option:checked {
    font-family: fantasy;
}

option {
    font-family: sans-serif;
}

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

Answer 2

需要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>

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

更改字体取决于 select 选项标签

Changing font depend on select option tag

html

javascript

css

jquery

frontend