維基媒體代碼怎麼輸入onfocus

https://wikimediafoundation.org/w/index.php?title=Special:UserLogin&returnto=Home 維基媒體代碼怎麼輸入onfocus

維基媒體有一個特殊的焦點在那裏輸入字段。

我試圖讓他們帶邊框：

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'>

但是，這並沒有給想要的結果，這也似乎是，如果我做了一個檢查CSS不會改變元件。

所以我認爲這必須是JavaScript或jQuery，但如何？

那麼他們如何做到這一點？

來源

2015-03-19 Wanjia

當我運行的代碼它的工作原理。問題恰恰是什麼？ – Quentin 2015-03-19 08:51:06

如果你看看維基媒體是如何做到這一點的，你會發現它不是邊界，因爲邊界稍微靠近邊緣對角線，而維基媒體沒有這個邊界。 – Wanjia 2015-03-19 08:54:30

http://jsfiddle.net/Lftct9rf/它的CSS3 ... – Vishwanath 2015-03-19 09:02:05

直接從他們的頁面上刮取的代碼。它的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">

來源

2015-03-19 09:37:25 Vishwanath

維基媒體代碼怎麼輸入onfocus

回答

相關問題