Question

我们如何调整输入字段焦点的边界半径。

HTML

<input type="text" class="rest" />

CSS

.rest{border-radius:15px;border:1px solid red;}

Answer 1

删除标准轮廓（不接受border-radius）并使用蓝色框阴影代替：

＆＃13;

System.ArgumentException: Keyword not supported: '*server'.
   at System.Data.Common.DbConnectionOptions.ParseInternal(Hashtable parsetable, String connectionString, Boolean buildChain, Hashtable synonyms, Boolean firstKey)
   at System.Data.Common.DbConnectionOptions..ctor(String connectionString, Hashtable synonyms, Boolean useOdbcRules)
   at System.Data.SqlClient.SqlConnectionString..ctor(String connectionString)
   at System.Data.SqlClient.SqlConnectionFactory.CreateConnectionOptions(String connectionString, DbConnectionOptions previous)
   at System.Data.ProviderBase.DbConnectionFactory.GetConnectionPoolGroup(DbConnectionPoolKey key, DbConnectionPoolGroupOptions poolOptions, DbConnectionOptions& userConnectionOptions)
   at System.Data.SqlClient.SqlConnection.ConnectionString_Set(DbConnectionPoolKey key)
   at System.Data.SqlClient.SqlConnection.set_ConnectionString(String value)
   at System.Data.SqlClient.SqlConnection..ctor(String connectionString, SqlCredential credential)
   at System.Data.SqlClient.SqlConnection..ctor(String connectionString)

＆＃13;

.rest{
  border-radius: 15px;
  border: 1px solid grey;
  padding-left: 8px;
}

.rest:focus {
  outline: none;
  box-shadow: 0px 0px 2px blue;
}

＆＃13;

codepen demo

Answer 2

使用:focus伪选择器

.rest:focus{
    border-radius:0;
}

<强> DEMO

Answer 3

您必须禁用元素焦点状态的轮廓：

*:focus { /*OR .rest:focus*/
    outline:none;
}

这是 FIDDLE

如果你想在浏览器默认焦点轮廓上使用border-radius，你只能在-moz-outline-border:5px;的firefox上进行，但这只适用于FF，但在WebKit中实现类似功能的请求已关闭作为WONTFIX，未来的计划是使轮廓遵循边界。

Answer 4

其他答案已经涵盖了解决方案，但是，提供的CSS样式不能准确地再现蓝色环的颜色或大小。例如，替换为：

:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

使用提供的解决方案，产生紫色的蓝色 before and after pic。而是尝试这种颜色：

.rest:focus {
  outline: none; 
  border-radius: 8px;  /* Your border radius here */
  box-shadow: 0px 0px 1px rgba(0,100,255,1),
              0px 0px 2px rgba(0,100,255,1),
              0px 0px 3px rgba(0,100,255,1); /* #0064FF */
}

Answer 5

当输入处于焦点时移除默认轮廓并添加应与输入默认状态的边框半径相匹配的边框

.rest:focus {
   outline: none;
   border: 1px blue solid;
}

焦点输入字段上的边框半径

5 个答案: