Сначала, если я не ошибаюсь, вы сохраняете результат sqlsrv_connect
в $conn
, и этот результат не является классом obj его ресурсом, поэтому remove $db->conn
В этом примере будет connect, затем выберите, если есть ресурсы, возвращенные из sqlsrv_query
$conn_array = array (
"UID" => "sa",
"PWD" => "root",
"Database" => "nih_bw",
);
$conn = sqlsrv_connect('BILAL', $conn_array);
if ($conn){
echo "connected";
if(($result = sqlsrv_query($conn,"SELECT * FROM routines")) !== false){
while( $obj = sqlsrv_fetch_object( $result )) {
echo $obj->colName.'<br />';
}
}
}else{
die(print_r(sqlsrv_errors(), true));
}
В вашем CSS:
input[type=text] {
background: transparent;
border: none;
border-bottom: 1px solid #000000;
}
Отсюда вы можете играть с padding, чтобы расположить фактический текст ввода там, где вы хотите. Например, чтобы строка простиралась на 5 пикселей в обе стороны от фактической области ввода:
padding: 2px 5px;
Можно разработать поле ввода однако, Вы хотите. Проверьте Codepen, где я разработал поле ввода только с CSS.
HTML -
<div class="input__box">
<input type="text" placeholder="Enter Some Text Here...">
</div>
CSS -
.input__box{
width:800px;
height: 200px;
margin:0 auto;
background-color: #f2f2f2;
display: grid;
place-items:center;
position: relative;
}
.input__box input{
all:unset;
width:600px;
height:60px;
border:1px solid grey;
padding-left:55px;
font-size:18px;
color:#333;
font-family:sans-serif;
position:relative;
}
input:focus{
outline:1px solid royalblue;
border:none;
}
input[type="text"]::-webkit-input-placeholder { /* Chrome/Opera/Safari */
font-size:18px;
color:dimgrey;
font-family:sans-serif;
}
input[type="text"]::-moz-placeholder{ /* Firefox 19+ */
font-size:18px;
color:dimgrey;
font-family:sans-serif;
}
input[type="text"]:-moz-placeholder{ /* Firefox 18- */
font-size:18px;
color:dimgrey;
font-family:sans-serif;
}
input[type="text"]:-ms-input-placeholder{ /* IE 10+ */
font-size:18px;
color:dimgrey;
font-family:sans-serif;
}
input[type="text"]::placeholder {
font-size:18px;
color:dimgrey;
font-family:sans-serif;
}
.input__box::before{
content: "☎";
position: absolute;
left: calc(50% - 327px);
top:calc(50% - 30px);
color: #333;
font-weight: bold;
font-size:40px;
padding:0 10px;
}
.input__box {
width: 800px;
height: 200px;
margin: 0 auto;
background-color: #f2f2f2;
display: grid;
place-items: center;
position: relative;
}
.input__box input {
all: unset;
width: 600px;
height: 60px;
border: 1px solid grey;
padding-left: 55px;
font-size: 18px;
color: #333;
font-family: sans-serif;
position: relative;
}
input:focus {
outline: 1px solid royalblue;
border: none;
}
input[type="text"]::-webkit-input-placeholder {
/* Chrome/Opera/Safari */
font-size: 18px;
color: dimgrey;
font-family: sans-serif;
}
input[type="text"]::-moz-placeholder {
/* Firefox 19+ */
font-size: 18px;
color: dimgrey;
font-family: sans-serif;
}
input[type="text"]:-moz-placeholder {
/* Firefox 18- */
font-size: 18px;
color: dimgrey;
font-family: sans-serif;
}
input[type="text"]:-ms-input-placeholder {
/* IE 10+ */
font-size: 18px;
color: dimgrey;
font-family: sans-serif;
}
input[type="text"]::placeholder {
font-size: 18px;
color: dimgrey;
font-family: sans-serif;
}
.input__box::before {
content: "☎";
position: absolute;
left: calc(50% - 327px);
top: calc(50% - 30px);
color: #333;
font-weight: bold;
font-size: 40px;
padding: 0 10px;
}
<div class="input__box">
<input type="text" placeholder="Enter Some Text Here...">
</div>
, если вы хотите этого также в ie6, то вы можете использовать изображение bg для этого с фоновой позицией
.
input{
background:url(bg-dot.jpg) repeat-x center bottom;
border:none;
padding:2px 2px;
}
, поэтому для всех браузеров с ie6 вы должны использовать это.