تبدو حدود كلمة المرور المنقط وكلمة المرور غريبتين في IE و Chrome

في IE8 عند تركيز الحقل ، يبدو منقطًا. أيضا ، عند الكتابة في حقل كلمة المرور فإنه يظهر symblos غريبة (هذا الخطأ هو أيضا في كروم ، ولكن في حالات أخرى تبدو جيدة).

لقطة شاشة IE: https://www.dropbox.com/s/s2b5mpjbyrfn8fh/ie_focused.png </أ>

لقطة شاشة Chrome:

https://www.dropbox.com/s/1zi8eq7zposn6c9/chrome.png </أ>

CSS:

.field input {
font-size: 14px;
border: 1px solid rgba(98,141, 40, 0.5);
-webkit-background-clip: padding-box; /* for Safari */
background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
border-radius:5px;
-moz-box-shadow: inset 0 0 1px 1px rgba(98,141, 40, 0.2);
-webkit-box-shadow: inset 0 0 1px 1px rgba(98,141, 40, 0.2);
box-shadow: inset 0 0 1px 1px rgba(98,141, 40, 0.2);

}

.field input:focus{
font-size: 14px;
-moz-box-shadow: 0 0 3px 3px rgba(98,141, 40, 0.2);
-webkit-box-shadow: 0 0 3px 3px rgba(98,141, 40, 0.2);
box-shadow: 0 0 3px 3px rgba(98,141, 40, 0.2);
border: 1px solid rgb(98,141, 40);
border-radius:5px;
}

إضافة نموذج HTML

    <form accept-charset="UTF-8" action="/users/sign_in" class="login" id="new_user" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="U+7u2UTO/3LS4dHOL21PgMpln5qZfrEWfwvnN/fxN6A="></div>
<div class="field2">

  
  <input id="user_email" name="user[email]" size="30" type="email" value="">
</div>

  <div class="field2">
    
     <input id="user_password" name="user[password]" size="30" type="password"> 
</div>

أين يمكن أن تكون المشكلة ؟

0

2 إجابة

يا الآن مسح المخطط التفصيلي الافتراضي

مثل هذا

.field input:focus{
outline:0;
}
0
وأضاف
عملت للحدود. شكر. ولكن ماذا عن وجهة نظر غريبة من كلمة المرور؟
وأضاف المؤلف skrypalyk, مصدر
مهلاDenMed يمكن أن ترسل رمز html الخاص بك ......
وأضاف المؤلف Rohit Azad, مصدر

بالنسبة إلى الخط ، غيّر الخط في مربع كلمة المرور:

#user_password {
    font-family: sans-serif;
}
0
وأضاف
شكرا جدا جدا)
وأضاف المؤلف skrypalyk, مصدر