by yebeen -

ie7에서 button tag 버그!

button 태그를 쓸 경우 ie7에서 width값이 안에 있는 객체 사이즈를 무시하고 padding이 들어간 것 처럼 나온다
그럴 때 써줘야하는 CSS 속성이 바로!

width:auto; overflow:visible;

파이어폭스에서도 ie7 과 동일한 형태로 출력되는데 아래 CSS를 넣어준다.

button::-moz-focus-inner {padding:0; border:0;}
by yebeen -

input tag box-shadow in ios

프로젝트 진행하다가, input 태그에 border를 추가했는데.
Ios에서만 shadow가 적용이 되어 있더라구요!
구글링을 해보니까 Ios에서 있는 버그라고 하더라구요~

당연히 해결방법도 찾았어요!
아래를 참고하세요:)

<style>
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
</style>
by yebeen -

placeholder 스타일 변경

가끔 화면을 만들다 보면 input창에 placeholder속성에 스타일들을 주어야 하는 경우를 볼 수 있어요!

그 경우에는 당황하지말고, 이 스타일들을 참고하세요 🙂

<style>
   /* WebKit, Blink, Edge */
   ::-webkit-input-placeholder {
      //example
        color:    #909;
   }
   /* Mozilla Firefox 4 to 18 */
   :-moz-placeholder {
      //example
       color:    #909;
       opacity:  1;
   }
   /* Mozilla Firefox 19+ */
   ::-moz-placeholder { 
      //example
      color:    #909;
      opacity:  1;
   }
   /* Internet Explorer 10-11 */
   :-ms-input-placeholder { 
      //example
      color:    #909;
   }
   /* Microsoft Edge */
   ::-ms-input-placeholder {
     //example
     color:    #909;
   }
</style>