PDA

View Full Version : مشکل با css یک textfield ?



redhat2
یک شنبه 11 فروردین 1392, 21:52 عصر
سلام به دسوتان ، نمیدونم جای درستی تاپیک زدم یا نه ولی امیدورام که کمکم کنید . سلام به دوستان ، من یه textfield طراحی کردم که فقط تویه firefox جواب میده ، و در google chrome جواب نمیده ، یعنی در Firefox ، بودر آبی میشه و لی در chrome بوردر آبی نمیشه :


css :


/*
Document : style
Created on : Aug 28, 2010, 12:20:04 AM
Author : Saeed
Description:
Purpose of the stylesheet follows.
*/

#text_field{
transition: all 250ms linear 0s;
background: none repeat scroll 0% 0% rgb(238, 238, 238);
font-family: Tahoma;
font-size: 11px;
width: 200px;
height: 28px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
border-radius: 2px 2px 2px 2px;
border: 1px solid rgba(0, 0, 0, 0.2);
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1) inset;
}

#text_field:focus{
transition: all 250ms linear 0s;
background: none repeat scroll 0% 0% white;
border: 1px solid rgb(56, 167, 230);
box-shadow: 0px 0px 5px rgb(56, 167, 230);
}


ممنون میشم که راهنماییم کنین .

siavashsay
دوشنبه 12 فروردین 1392, 10:03 صبح
دوست عزیز !
این مشکل بر میگرده به موتور هر مرورگر ! اما برای رفع اون خاصیت :
outline: none; رو به قسمت focus استایل خودتون اضافه کنید درست میشه ! یعنی اینطوری میشه :

#text_field:focus{
outline: none;
transition: all 250ms linear 0s;
background: none repeat scroll 0% 0% white;
border: 1px solid rgb(56, 167, 230);
box-shadow: 0px 0px 5px rgb(56, 167, 230);
}
موفق باشید

mahdi.iqu
دوشنبه 12 فروردین 1392, 10:28 صبح
البته مورد زیر رو هم رعایت نکردید این کد ها رو تو قسمت فوکس اضافه کنید:


-moz-transition: all 250ms linear 0s;
-webkit-transition: all 250ms linear 0s;
-o-transition: all 250ms linear 0s;
-ms-transition: all 250ms linear 0s;