Q&A
（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、HTMLも提示してください。
ボタンを作成したWebページをiOSで表示すると、PCとは違ってボタンの角が丸く表示されてしまいます。
下記のURLのHTML、CSSを表記してみましたが、いずれも変化がありませんでした。
また、CSSでのボタンの表示位置は適応されるみたいですがボタンのデザインなどは適応されないようです。
https://www.webdlab.com/labs/ios-button/
基本となるページのファイルは以下の通りです。
CSS
1.img_wrapper { 2 position: relative; 3} 4 5.img_wrapper img { 6 width: 100%; 7} 8 9input{ 10 display: inline-block; 11 text-decoration: none; 12 font-size: 25px; 13 border: solid 2px black; 14 border-radius: 2px; 15 transition: .4s; 16 position: absolute; 17 margin:0; 18 padding:0; 19 background: white; 20 color: black; 21} 22 23input.id1{ 24 width: 5%; 25 height: 3.5%; 26 top: 49.85%; 27 left: 11.4%; 28 -ms-transform: translate(-50%,-50%); 29 -webkit-transform: translate(-50%,-50%); 30 transform: translate(-50%,-50%); 31} 32 33(id6まで、ボタン位置を指定するソースが続く) 34
HTML
1<html> 2<head> 3<title>ページタイトル</title> 4<link rel="stylesheet" type="text/css" href="CSSファイル.css"> 5</head> 6<body> 7<center> 8<table border><tr><td><div class="img_wrapper"> 9<img src="ページ画像.png"> 10<input type="button" value="①" class="id1"> 11<input type="button" value="②" class="id2"> 12<input type="button" value="③" class="id3"> 13<input type="button" value="④" class="id4"> 14<input type="button" value="⑤" class="id5"> 15<input type="button" value="⑥" class="id6"> 16</div></td></tr><tr><td> 17<textarea rows="6" cols="30" readonly> 18<?php 19$db=new SQLite3('データベースファイル.db'); 20 21$sql_result=$db->query("データベースからデータを取得するコマンド"); 22 23while( $data = $sql_result->fetchArray() ) { 24 25print $data["名前"]."\n"; 26 27} 28 29$db->close(); 30?> 31</textarea> 32</table> 33</body> 34</html>
ご指摘、ありがとうございます。編集しました。
回答1件
0
ベストアンサー
css
1input { 2 -webkit-appearance: none; 3 border-radius: 0; 4}
投稿2018/11/27 02:30
総合スコア85
返信、ありがとうございます。
そのソースは上記の参考サイトにもあり、試したのですが何も変化がありませんでした...。
htmlの方も貼っていただけますか？
対象がわからないので
失礼しました。編集しました。
https://jsfiddle.net/3asfox49/2/
こちらをスマホで見てみてください。
無効にしたい対象にこのスタイルを当てるだけでいいと思います。
ありがとうございます。
解決しました。
対象のCSSに
-webkit-appearance: none;
を1行ずつ追加することで解決しました。
あなたの回答
tips
プレビュー
