动态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 .icon {
  position: absolute;
  left: 15px;
  top: 15px;
  pointer-events: none;
}
.url-input .icon svg,
.url-input .icon img {
  display: block;
  width: 18px;
  height: 18px;
}
.url-input .icon svg {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke: var(--icon);
}
.url-input .icon svg path {
  stroke-dasharray: 24px;
  stroke-dashoffset: var(--icon-offset);
}
.url-input .icon .favicon {
  position: absolute;
  left: 0;
  top: 0;
  -webkit-transform: scale(var(--favicon-scale)) translateZ(0);
          transform: scale(var(--favicon-scale)) translateZ(0);
}
.url-input .text {
  -webkit-box-flex: 1;
          flex-grow: 1;
}
.url-input .text input {
  -webkit-appearance: none;
  line-height: 24px;
  background: none;
  border: none;
  outline: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 12px 12px 44px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color);
}
.url-input .text input::-webkit-input-placeholder {
  color: var.........完整代码请登录后点击上方下载按钮下载查看