input幅を変えたい。

inputにjquery-uiを読み込みました。
input type="text"とすると、このコメント欄のような白枠ができますよね。
この白枠の幅を変えようと思って、同じinputの中にclassを書き、別のcssファイルにコードを書いたんですが幅だけが反映されませんでした。
input自体はdivで囲んでます。divにID等まだありません。

ソースコード

<div> <label>カレンダー</label> <input type="text" id="datepicker" name="tel"> </div>

ここのサイトの手順に沿って書きました。

http://www.webdesign-fan.com/jquery-ui-datepicker

行動規範の内容に同意します

回答1件

ベストアンサー

inputにjquery-uiを適用しました。

そもそもjQuery-uiはHTMLElementに「適用」するものではないです

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
3<script>
4$(function(){
5  $('#datepicker').css({width:100,height:50}).animate({width:300,height:150});
6});
7</script>
8<div>
9<label>カレンダー</label>
10<input type="text" id="datepicker" name="tel">
11</div>

追記css適用

テキストボックスにクラスを与えて幅が変更できない・・・的な話ですが
普通に変更されますね。どこがどうなるかさっぱりわかりません。
ブラウザ依存の話かもしれないのでOSやブラウザの種類とバージョンを補足してほしいです。

javascript
1<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
2<style>
3.hoge{width:300px}
4</style>
5<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
6<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
7<script>
8$(function(){
9  $("#datepicker").datepicker();
10  $("#datepicker").datepicker("option", "showOn", 'button');
11  $("#datepicker").datepicker("option", "buttonImageOnly", true);
12  $("#datepicker").datepicker("option", "buttonImage", 'ico_calendar.png');
13});
14</script>
15<div>
16<label>カレンダー</label>
17<input type="text" id="datepicker" name="tel" class="hoge">
18</div>

投稿2019/07/04 06:15

編集2019/07/04 06:46

yambejp

総合スコア114814

退会済みユーザー

2019/07/04 06:19

うまい言い方がわからなかったので。なぜfunctionで書かないと反映されないんでしょうか？

yambejp

2019/07/04 06:20

具体的になにをどうしたいのかわかりませんもしかしてjquery-ui.cssの話でしょうか？

退会済みユーザー

2019/07/04 06:38 編集

input type="text"とすると、このコメント欄のような白枠ができますよね。この白枠の幅を変えようと思って、同じinputの中にclassを書き、別のcssファイルにコードを書いたんですが幅だけが反映されませんでした。 yambe.jpさんはfunctionの箇所に.cssという形で記述していましたが、これも高さは変わりますが幅が変更できないように思えます。これはなぜですか？

yambejp

2019/07/04 06:42

テキストボックスの幅を変えたいのですか？カレンダーの幅を変えたいのですか？

退会済みユーザー

2019/07/04 06:45

テキストボックスです。

yambejp

2019/07/04 06:46

追記しました。何の問題もなく幅は変わると思いますが？

退会済みユーザー

2019/07/04 07:13

ありがとうございました。助かりました。私の記述ミスが原因でした。