html - 如何声明输入框的内半径

Question

输入框内半径

<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);
}

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

编辑

图片

Answer 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-fiddle：http: //jsfiddle.net/qCyKW/

​</p>