HTML/CSS를 사용하여 둥근 텍스트 상자를 만들 수 있습니까?

그래서 둥근 모서리가있는 텍스트 상자를 만들려고하는데 정확히 어떻게해야하는지 모릅니다. 지금까지 HTML과 CSS를 사용하고 싶습니다. 그러나 모서리를 반올림하여 마음을 감쌀 수는 없습니다.HTML/CSS를 사용하여 둥근 텍스트 상자를 만들 수 있습니까?

HTML : 가능한 경우 지금 들어

<form action="index.php"> 
     Textbox <input type="text"/> <br /> 
     </form>

, 내가 필요한 모든는 CSS입니다.

form { 
height:50px; width:200px; 
}

이 CSS이 불가능한 경우

그냥 코멘트에 그렇지 않은 경우, 제발 말해 말 : 이것은 내가 지금까지 CSS의이 것입니다. 감사합니다

출처

2013-04-14 Anonymous

이 링크에서보세요 http://stackoverflow.com/questions/7810549/how-to-make-a-text-box-have-rounded-corners를 사용하면 중복 질문이됩니다. –

CSS3 생성기 : http://css3generator.com/ –

당신은 당신의 CSS 파일에 다음을 추가하여 둥근 모서리를 추가 할 수 있습니다

input { 
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
      border-radius: 3px; 
}

내가 예를 들어 3px의 여기에 사용 - 당신은 쉽게 그것을 바꿀 수 있습니다. 숫자가 높을수록 모서리가 둥글게됩니다. 당신은 또한이 같은 단일 모서리에 둥근 모서리를 추가 할 수 있습니다

input { 
    -webkit-border-top-left-radius: 3px; 
     -moz-border-radius-topleft: 3px; 
      border-top-left-radius: 3px; 
}

이 예제는 왼쪽 상단 모서리를 둥글게 것이다. 이 코드를 사용하면 특정 모퉁이 또는 모든 것을 한 번에 얼마나 쉽게 라운드 할 수 있는지 쉽게 알 수 있습니다.

출처

2013-04-14 02:46:26 lflores

'-moz-'접두사는 [Firefox ... 3.6] (http://caniuse.com/#feat=border-radius) 용입니다! IMHO 당신은 그것을 안전하게 놓을 수 있습니다. '-webkit' (데스크탑의 Saf 4, 모바일의 iOS 3.2 및 Android 2.1)에서도 마찬가지입니다. – FelipeAls

@FelipeAls 그게 사실이긴하지만, 대상 브라우저가 무엇인지에 대한 질문의 범위에서 정의되지 않았고 믿거 나 말거나, 특정 브라우저의 구버전을 사용하는 구식 사람들이 많이 있습니다 ... – DarkAjax

@darkajax 필자는 꼭해야합니다. 내 현재 프로젝트에서 IE6를 지원하므로 아직 사용중인 오래된 브라우저에 대해 이야기 해 보겠습니다.)하지만 border-radius는 벤더에 의해 접두어가 붙지 않은 버전으로 전환 된 첫 번째 속성 중 하나였습니다. 순수 스타일링 속성입니다 (아무 것도 충돌하지 않습니다.). 엄지 손가락의 규칙 : CSS3pie를 IE8 이하 버전의 polyfill로 추가하지 않으면이 특정 속성에 대한 접두사가있는 CSS 파일을 부 풀릴 필요가 없습니다. IE6-8의 Marketshare >> 국경 반경을 인식하지만 접두어 만 사용하는 브라우저의 시장 점유율 – FelipeAls

당신은, 그러나 그것은 모든 브라우저에서 작동하지 않습니다 명심 border-radius을 시도 할 수 :

input[type="text"] { 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
}

데모 : http://jsbin.com/uduyew/1/edit이

출처

2013-04-14 02:47:05 DarkAjax

lflores의 대답과 같은 주석 – FelipeAls

HTML/CSS를 사용하여 둥근 텍스트 상자를 만들 수 있습니까?

답변

관련 문제