如何声明输入框的内半径

时间:2012-12-06 09:00:24

标签: html css

输入框的内半径

<input type="text" class="input-text">

CSS

.input-text{
  border-width: 4px;
  border-color: #F85534;
  padding: 6px 14px;
  width: 540px;
  font-size: 16px;
  margin: 0px !important;
  height: 35px;
  -webkit-appearance: none;
  z-index: 5;
  position: relative;
  border-radius:0px;
  box-shadow: inset -1px 1px 2px 
  rgba(43, 40, 40, 0.2),-1px 1px 0px 
  rgba(43, 40, 40, 0.2),-2px 2px 0px 
  rgba(43, 40, 40, 0.2);
  -webkit-box-shadow: inset -1px 1px 2px rgba(43, 40, 40, 0.2),-1px 1px 0px rgba(43, 40,40,0.2),-2px 2px 0px rgba(43, 40, 40, 0.2);
}

我需要文本框的内半径,外半径应为零。

修改

图片enter image description here

1 个答案:

答案 0 :(得分:1)

我不确定如果不将输入包装在div中就能做到这一点,我就是这样做的:

HTML:

<div class="input-wrapper"><input type="text" placeholder="text"></div>​

CSS:

.input-wrapper {
    background: blue;
    padding: 3px;
    display: inline-block;
}

.input-wrapper input {
    border-radius: 5px;
    border: none;
    font-size: 14px;
    padding: 3px;
}

在这里检查一个JS小提琴:http://jsfiddle.net/qCyKW/