input type="button" css수정시 모바일에서 적용이 안돼요

안녕하세요 워드프레스로 쇼핑몰 구축을 목표로 공부중인 개린이 디자이너입니다.(아무것도 모르니 실컷 지적해주세요)

이전에도 경험했었는데 모바일기기의 버튼과 웹에서 보이는 버튼에 차이가 생기는 이유가 무엇일까요..?

 

WooCommerce Quick Buy플러그인으로 생성한 [바로구매] 버튼이 말썽입니다.

4jvCgUxf7363U3

 css를 손대지 않으면, 기본 버튼디자인과 같은 모습으로 웹, 모바일 동일하게 작동합니다.

 

N3cacnCfiJHKKx

css를 만지고나니 모바일에서는 문제가 생기네요ㅜㅜ(모바일에서는 아예 css가 적용되지 않습니다.)

 

구글링해봤지만 애초에 서치능력달려 원인을 찾지 못했습니다.. 추측하는 유일한 차이점은 WooCommerce의 다른 버튼은 button인데, [바로구매]버튼은 input type="button"이라는 점이에요.

혹시나해서 플러그인파일에서 직접 input -> button으로 만들어보려고 했지만, 무슨코드를 고쳐야하는지...허허

어떻게 바로잡을 수 있을까요..?

 

질문을 위해 조금 더 서치(29cm, apple)해봤습니다.

버튼은 <button>, <a class="button">, <input type=""> 총 3종류로 제작되고,

  1. <button>은 이전의 정보를 가져갈때 (e.g. type="submit")

  2. <a class="button">은 페이지 전환시

  3. <input>은 주로 type="radio"로 옵션선택

이렇게 사용하더군요.

 

혹시 잘못 알고있는 점이 있을까요?

 

지금은 모자란 실력탓에 우커머스와 유료테마를 사용중입니다. 나중에는 무거운 테마를 사용하지 않고 오직 내 사이트를 위한 커스텀제작을 목표로 하고있습니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기