如何在HTML和CSS中修改搜索栏的字体家族和边框颜色？

huangapple
go评论129阅读模式
英文:

How do I modify the font family and border color of my search bar in HTML and CSS?

问题

以下是您要翻译的内容：

  1. <!-- begin snippet: js hide: false console: true babel: false -->
  3. <!-- language: lang-css -->
  4. .searchInput::-webkit-input-placeholder {
  5.   font-family: FontAwesome;
  6.   font-weight: normal;
  7.   overflow: visible;
  8.   vertical-align: top;
  9.   display: inline-block !important;
  10.   padding-left: 2%;
  11.   padding-top: 1%;
  12.   color: #9D9494;
  13. }
  14. .searchInput {
  15.   border: 1px solid white;
  16.   border-radius: 5px;
  17.   width: 39%;
  18.   height: 5%;
  19.   padding: 0px;
  20.   font-size: 20px;
  21.   margin-left: 60%;
  22.   margin-top: 2%;
  23.   margin-bottom: 5%;
  24. }
  26. <!-- language: lang-html -->
  27. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
  28. <input class="searchInput" type="text" placeholder=" &#61442; search " /><br />
  30. <!-- end snippet -->

请注意，这是您提供的HTML和CSS代码，已经按原样呈现出来。如果您需要任何翻译或进一步的帮助，请随时提问。

英文:

hello i need to make a serach bar it works for me but i have some modification to do what i aim to do is when i click on the bar search i want to change the color of border from black to blue .. besides how can i change the font family of the word search !

this my html and css code thanks in advice !

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. .searchInput::-webkit-input-placeholder {
  2.   font-family: FontAwesome;
  3.   font-weight: normal;
  4.   overflow: visible;
  5.   vertical-align: top;
  6.   display: inline-block !important;
  7.   padding-left: 2%;
  8.   padding-top: 1%;
  9.   color: #9D9494;
  10. }
  11. .searchInput {
  12.   border: 1px solid white;
  13.   border-radius: 5px;
  14.   width: 39%;
  15.   height: 5%;
  16.   padding: 0px;
  17.   font-size: 20px;
  18.   margin-left: 60%;
  19.   margin-top: 2%;
  20.   margin-bottom: 5%;
  21. }

<!-- language: lang-html -->

  1. &lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css&quot; rel=&quot;stylesheet&quot;/&gt;
  2. &lt;input class=&quot;searchInput&quot; type=&quot;text&quot; placeholder=&quot; &amp;#61442; search &quot; /&gt; &lt;br /&gt;

<!-- end snippet -->

答案1

得分: 1

可以使用:focus选择器来在点击搜索栏时更改边框颜色。如果你想要更改占位符字体系列，可以使用:placeholder选择器。

例如：

  1. .searchInput:focus {
  2.     border-color: blue;
  3. }
  5. .searchInput:placeholder {
  6.     font-family: "Open-sans";
  7. }
英文:

You can use the :focus selector to change the border color when you click on the search bar. If you want to change the placeholder font family, you can use the :placeholder selector.

for eg:

  1.  .searchInput:focus {
  2.      border-color: blue;
  3.  }
  5. .searchInput:placeholder{
  6.      font-family: &quot;Open-sans&quot;;
  7.  }

huangapple
  • 本文由 发表于 2023年5月26日 16:26:57
  • 转载请务必保留本文链接：https://go.coder-hub.com/76339007.html
  • angular
  • css
  • html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定