那里的维基媒体代码是如何输入焦点的

How does wikimedia code there input onfocus

本文关键字：输入 焦点 何输入 媒体 代码 那里      更新时间：2023-09-26

https://wikimediafoundation.org/w/index.php?title=Special:UserLogin&returnto=主页

维基媒体特别关注这些输入字段。

我试着用边界做它们：

    input.small:focus {
        outline: none;
        padding-left: 0.5%;
        border-left: 5px solid #f00000;
        box-shadow: 0 0 0;
    }
input.big{
        height:50px;
    }
input.big:focus {
        outline: none;
        padding-left: 0.5%;
        border-left: 10px solid #f00000;
        box-shadow: 0 0 0;
    }
<input class='small'></br>
<p>Here you can see the diagonal line better.</p>
<input class='big'>

但这并没有得到想要的结果，如果我做了一个inspect元素，css似乎也不会改变。

所以我认为这一定是javascript或者jquery，但是怎么做呢？

那么他们是怎么做到的呢？

直接从页面中抓取的代码。它的CSS3，不涉及javascript。

.mw-ui-input {
  -webkit-appearance: none;
  border: 1px solid #CCC;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: .3em .3em .3em .6em;
  display: block;
  vertical-align: middle;
  border-radius: 2px;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  -webkit-transition: border linear .2s,box-shadow linear .2s;
  -moz-transition: border linear .2s,box-shadow linear .2s;
  -o-transition: border linear .2s,box-shadow linear .2s;
  transition: border linear .2s,box-shadow linear .2s;
}
.mw-ui-input:focus {
  box-shadow: inset .45em 0 0 #347bff;
  border-color: #898989;
  outline: 0;
}
<input class="mw-ui-input">

相关文章：