html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="./1-1-reg.css" /> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="//hovertree.com/texiao/bootstrap/4/css/city-picker.css" rel="stylesheet" type="text/css" /> <title>Document</title> <script src="//cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="//hovertree.com/texiao/bootstrap/4/js/city-picker.data.js"></script> <script src="//hovertree.com/texiao/bootstrap/4/js/city-picker.js"></script> <script src="//hovertree.com/texiao/bootstrap/4/js/main.js"></script> </head> <body> <table class="content_form"> <tr class="trone"> <td class=" mouse_city"> <input id="city-picker3" class="form-control input" readonly type="text" name="location" value="" data-toggle="city-picker" /> </td> </tr> </table> </body> </html>
css
.content_form .trone { width: 100%; height: 66px; box-sizing: border-box; padding-bottom: 20px; position: relative; } .city-picker-span { border: 1px solid #d8e0e6 !important; padding-left: 12px !important; height: 46px; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333333; line-height: 46px; margin-left: 0; border: none; }