动态url输入框可显示网站favicon图片效果代码-html代码-BFW代码库

动态url输入框可显示网站favicon图片效果代码

代码语言：html

代码描述：动态url输入框可显示网站favicon图片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">


  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Inter:400,500,600,700&amp;display=swap'>
  
<style>
.url-input {
  --background: #fff;
  --border-default: #E1E6F9;
  --border-active: #275EFE;
  --text-color: #646B8C;
  --placeholder-color: #BBC1E1;
  --icon: #275EFE;
  --close: #646B8C;
  --close-light: #A6ACCD;
  --close-background: #EFF2FB;
  width: 100%;
  max-width: 240px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  position: relative;
  border-radius: 8px;
  background: var(--background);
  box-shadow: inset 0 0 0 var(--border-width, 1px) var(--border, var(--border-default));
  -webkit-transition: box-shadow .2s;
  transition: box-shadow .2s;
  --favicon-scale: 0;
  --icon-offset: 0px;
  --clear-x: 0px;
  --clear-swipe-left: 0px;
  --clear-swipe-x: 0;
  --clear-swipe: 0px;
  --clear-scale: 0;
  --clear-rotate: 0deg;
  --clear-opacity: 0;
  --clear-arrow-o: 1;
  --clear-arrow-x: 0px;
  --clear-arrow-y: 0px;
  --clear-arrow-offset: 4px;
  --clear-arrow-offset-second: 4px;
  --clear-line-array: 8.5px;
  --clear-line-offset: 27px;
  --clear-long-array: 8.5px;
  --clear-long-offset: 24px;
}
.url-input.clearing, .url-input:focus-within {
  --border-width: 1.5px;
  --border: var(--border-active);
}
.url-input.clearing {
  --close-background: transparent;
  --clear-arrow-stroke: var(--close-light);
}
.url-input .ico.........完整代码请登录后点击上方下载按钮下载查看